// AICRO Signal-to-Scale Microsite — main app
const { useState, useEffect, useRef, useMemo, Fragment } = React;

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

// ─── Logomark — small badge for avatar contexts only (Slack avatar etc.)
//     The canonical AICRO logo is the wordmark "AICRO" in Montserrat Bold Sky Blue.
//     Nav and Footer use the wordmark directly; this badge is reserved for places that need a square icon.
function Logomark({ size = 28, dark = false }) {
  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">Signal-to-Scale</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#system">The system</a>
            <a href="#portal">Client Portal</a>
            <a href="#cases">Case studies</a>
            <a href="#timeline">90 days</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#cta" className="btn btn-ghost btn-sm">Stack audit</a>
          <a href="#cta" className="btn btn-primary btn-sm">Book demo</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 causaLens leadership · 2-month pilot · ready on signature</span>
        </div>
        <h1 style={{maxWidth:1080, textWrap:"balance"}}>
          Your lookalike thesis is the<br/>
          targeting. We run the system<br/>
          that books the meetings.<br/>
          <span style={{color:"#21A8F2"}}>Profile match in. Tier-1 buyers booked.</span>
        </h1>
        <p className="lead" style={{marginTop:24}}>
          An operator-built revenue system for enterprise AI vendors. 75 warmed sender domains, multi-seat LinkedIn, signal-grounded copy, Slack-native reply triage. Built around the lookalike thesis we developed with your team, run end-to-end by the operators who&rsquo;ve scaled enterprise GTM systems before.
        </p>
        <div className="hero-cta-row">
          <a href="#economics" className="btn btn-primary btn-lg">See the economics →</a>
          <a href="#system" className={dark ? "btn btn-outline-light btn-lg" : "btn btn-ghost btn-lg"}>See the system</a>
        </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>
  ),
  Lucra: ({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.03em" fill={color}>LUCRA</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>
  ),
  SevenGC: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 80 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="16" fontWeight="600" letterSpacing="0.04em" fill={color}>7G &amp; Co.</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>
  ),
  Duxre: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 80 22" height="20"><circle cx="6" cy="11" r="3" fill="#21A8F2"/><text x="14" y="17" fontFamily="Inter,sans-serif" fontSize="17" fontWeight="700" letterSpacing="-0.02em" fill={color}>Duxre</text></svg>
  ),
  CausaLens: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 110 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="17" fontWeight="700" letterSpacing="-0.02em" fill={color}>causa</text><text x="48" y="17" fontFamily="Inter,sans-serif" fontSize="17" fontWeight="700" letterSpacing="-0.02em" fill="#21A8F2">Lens</text></svg>
  ),
};

function TrustStrip({ dark }) {
  const color = dark ? "#1C1C24" : "#1C1C24";
  return (
    <section className="trust-strip">
      <div className="wrap trust-inner">
        <span className="trust-label">Trusted by</span>
        <div className="trust-logos">
          <ClientLogos.Crexi color={color}/>
          <ClientLogos.Pacaso color={color}/>
          <ClientLogos.Hemlane color={color}/>
          <ClientLogos.Capitalize color={color}/>
          <ClientLogos.Lucra color={color}/>
          <ClientLogos.Gumption color={color}/>
          <ClientLogos.SevenGC color={color}/>
        </div>
      </div>
    </section>
  );
}

// ─── Pipeline trap ─────────────────────────────────────
function PipelineTrap() {
  const traps = [
    {
      ix: "01 / GENERIC ENTERPRISE AI AGENCY",
      title: "Hire an outbound shop that&rsquo;s never sold a Digital Worker to a Chief Data Officer.",
      body: "The campaigns read like demo-ware. By month 3 your team is rewriting their copy. By month 6 your AEs are pulled off Tier-1 cycles to clean up the agency&rsquo;s mess while the lookalike clock runs.",
      killers: ["No enterprise AI vocabulary", "No C-suite buyer model", "Generic 'book a demo' CTAs"],
      cost: "$8K–$15K/mo · 6+ months wasted",
    },
    {
      ix: "02 / IN-HOUSE SDR LAYER",
      title: "Stack two enterprise-fluent SDRs on top of your AE pool.",
      body: "Enterprise-AI-fluent SDRs are rare. The first hire ramps in 9 months. The second churns at month 5. Your AEs end up running both motions, ahead of buying cycles you can&rsquo;t shorten.",
      killers: ["9 months to first qualified Tier-1 meeting", "30–40% annual SDR turnover", "Your AEs absorb the management"],
      cost: "$370K–$450K Year 1 (loaded)",
    },
    {
      ix: "03 / DIY SOFTWARE STACK",
      title: "Stitch 40+ tools yourself.",
      body: "Apollo, Outreach, Sales Navigator, Clay, Zapier, HubSpot, Smartlead — that&rsquo;s just the start. AICRO ships 40+ integrations as one operated system. By month 4 your RevOps team is running ops, not closing enterprise accounts.",
      killers: ["Integrations break weekly", "Enterprise persona data thin in generic providers", "Your team becomes the ops admin"],
      cost: "$30K–$50K/yr tool spend + 4 months lost",
    },
  ];
  return (
    <section className="section section-soft" id="trap">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>The Tier-1 outbound trap</span>
          <h2>You&rsquo;ve shipped the Digital Worker. Your AEs are closing six-figure deals. Tier-1 outbound at the cadence and precision the lookalike thesis demands isn&rsquo;t a job your sales team can layer on top, and the three obvious paths each cost months you don&rsquo;t have.</h2>
          <p>Every enterprise AI vendor at your stage has tried at least one of these. The real cost isn&rsquo;t the retainer or the salaries. It&rsquo;s 6 to 12 months burned figuring out which channel works while a competitor learns the lookalike motion before you do.</p>
        </div>
        <div className="trap-grid">
          {traps.map((t,i) => (
            <div className="trap-card" key={i}>
              <div className="ix">{t.ix}</div>
              <h3 dangerouslySetInnerHTML={{__html:t.title}}></h3>
              <p style={{color:"var(--slate-500)",fontSize:14,marginTop:8,lineHeight:1.6}} dangerouslySetInnerHTML={{__html:t.body}}></p>
              <div className="killers">
                {t.killers.map((k,j) => <div className="killer" key={j}>{k}</div>)}
              </div>
              <div className="trap-card-cost">
                <span className="trap-card-cost-lbl">Real cost</span>
                <span className="trap-card-cost-val">{t.cost}</span>
              </div>
            </div>
          ))}
        </div>
        <div className="trap-cost">
          <div className="trap-cost-num">6-12 mo</div>
          <div className="trap-cost-label">of runway burned figuring out which channel works. Not the agency fee, not the SDR salary. The months you spent before knowing if any of it scales.</div>
        </div>
      </div>
    </section>
  );
}

// ─── Matrix ─────────────────────────────────────
function Matrix() {
  const cols = ["Agency", "In-house", "DIY stack", "AICRO"];
  const rows = [
    { row: "Speed to results", vals: [1, 1, 2, 4], aicro: "First Tier-1 meetings in 30 to 45 days" },
    { row: "Strategic precision", vals: [2, 2, 1, 4], aicro: "Operator-CRO, weekly cadence" },
    { row: "Scalable execution", vals: [2, 1, 2, 4], aicro: "AI agents + ops, 75 domains" },
    { row: "CRM-native", vals: [1, 2, 2, 4], aicro: "SFDC / HubSpot native" },
    { row: "Mgmt overhead", vals: [3, 1, 2, 4], aicro: "Operator in the room" },
    { row: "Cost predictability", vals: [3, 1, 2, 4], aicro: "Single monthly retainer" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">02 / Position</span>
          <h2>Not an agency. Not a tool. A fractional revenue org.</h2>
          <p>A CRO, a delivery team, and a product platform — in one engagement, inside your CRM, paid as one monthly retainer.</p>
        </div>
        <div className="matrix">
          <table>
            <thead>
              <tr>
                <th style={{width:"28%"}}> </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 (Signal Map, warmly-style radar) ─────────────────────────────────────
function SignalMapVisual() {
  // causaLens cross-vertical lookalike anchors — BFSI, Pharma, Energy, Enterprise Tech
  const nodes = [
    { x:"24%", y:"26%", cls:"hot",   tag:"HEAD OF MODEL RISK",     co:"Goldman Sachs · BFSI" },
    { x:"72%", y:"22%", cls:"hot",   tag:"CHIEF DATA OFFICER",     co:"Novartis · Pharma" },
    { x:"20%", y:"74%", cls:"warm",  tag:"CCO · COMPLIANCE OPS",   co:"BNP Paribas · BFSI" },
    { x:"82%", y:"58%", cls:"warm",  tag:"HEAD OF DIGITAL",        co:"Pfizer · Pharma" },
    { x:"45%", y:"8%",  cls:"match", tag:"CHIEF DIGITAL OFFICER",  co:"Shell · Energy" },
    { x:"68%", y:"78%", cls:"hot",   tag:"CHIEF AI OFFICER",       co:"ServiceNow · Ent Tech" },
    { x:"14%", y:"48%", cls:"warm",  tag:"HEAD OF AI",             co:"TotalEnergies · Energy" },
    { x:"55%", y:"86%", cls:"match", tag:"HEAD OF DATA",           co:"Siemens · Ent Tech" },
  ];
  const sources = [
    { pos:{left:16,top:16},     t:"AICRO Signal Library" },
    { pos:{right:16,top:16},    t:"RevenueBase" },
    { pos:{left:16,bottom:16},  t:"AICRO signal layer" },
    { pos:{right:16,bottom:16}, t:"AICRO Reply Agent" },
  ];
  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">Lookalike anchors matched</span>
        <span className="v">387</span>
        <span className="s">↑ 12 new this hour</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>
      ))}
      {sources.map((s,i) => (
        <div key={i} className="signal-source" style={{...s.pos, transform:"none"}}>{s.t}</div>
      ))}
    </div>
  );
}

function PhaseDetect() {
  const sources = [
    { lbl:"Tier-1 / Tier-2 firmographic match · 4 verticals", val:"RevenueBase + AICRO match layer" },
    { lbl:"AI / Data / Digital C-suite hire (12mo)", val:"RevenueBase + LinkedIn parsing" },
    { lbl:"Public AI governance / responsible AI commitments", val:"AICRO News Feed + filings" },
    { lbl:"Earnings-call mentions: governance, explainability, digital workers", val:"AICRO transcript monitor" },
    { lbl:"Regulatory exposure (SEC MR, ECB TRIM, FDA AI/ML, EU AI Act)", val:"AICRO compliance signal layer" },
    { lbl:"Conference speaker / attendee match (Davos, Sibos, JPM Healthcare, HLTH)", val:"AICRO event monitor" },
    { lbl:"Closed-won lookalikes", val:"causaLens CRM data (week 4+)" },
  ];
  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 (AICRO Send / Connect / Outreach Agent) ─────────────────────────────────────
function PhaseOutreach() {
  const products = [
    {
      mark:"send",
      name:"AICRO Send",
      tag:"EMAIL OUTBOUND PLATFORM",
      desc:"75 warmed sender domains, calibrated for enterprise inbox patterns: morning open windows, mobile read for executives, sector-fluent 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 plus a causaLens GTM seat (with explicit consent). Connection requests, follow-ups, and InMails sequenced as one campaign.",
      feats:["Multi-seat orchestration", "Channel-aware sequencing", "C-suite persona targeting"],
      stats:[ {v:"47%", l:"accept rate"}, {v:"54%", l:"positive rate"} ],
    },
    {
      mark:"agent",
      name:"AICRO Outreach Agent",
      tag:"HYPER-PERSONALIZATION LAYER",
      desc:"Reads each prospect&rsquo;s recent regulatory action, AI / model-risk hires, and public AI governance posture. Drafts a single relevance line off the lookalike anchor that triggered the touch. Operator-approved before send. Never generic.",
      feats:["Signal-grounded copy", "Per-account 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 (Reply Agent + Sales Action / AICRO Rounds) ─────────────────────────────────────
// ─── SlackCard wrapper (chrome only — body is children) ─────────────
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> Justin Knott</div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Name:</span>
          <span className="v">[Redacted] · Tier-1 IB</span>
          <span className="k" style={{marginTop:6}}>Job Title:</span>
          <span className="v">Head of Model Risk Management</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">[Redacted Tier-1 Investment Bank]</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">[redacted].head.mrm@[bank].com</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">LI | CRO/CCO · Investment Banks</span>
        </div>
      </div>
      <div className="slack-pill"><span className="pdot"></span>Website</div>
      <div className="slack-block">
        <span className="lbl">Last Reply:</span>
        <span className="val">I don&rsquo;t think I saw the deck come through. Can you resend the model-risk explainability piece?</span>
      </div>
      <div className="slack-block">
        <span className="lbl">Generated Response:</span>
        <span className="val">Just checked on that for you. It looks like there was a mix-up on the routing. Resending the model-risk explainability brief now.</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>[Tier-1 Asset Mgr] | Head of Compliance Ops</strong> · <span style={{color:"#A8AFC0"}}>$300K ACV · Stage: Opportunity</span>
      </div>
      <div style={{fontSize:12,color:"#A8AFC0",marginBottom:10}}>Recommended for: causaLens AE</div>
      <div className="slack-source-line">
        <strong>Source:</strong> HubSpot · <strong>Run:</strong> AICRO Rounds · Sat June 21 · <strong>Close date:</strong> 2026-09-30
      </div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Contact:</span>
          <span className="v">[Redacted]</span>
          <span className="k" style={{marginTop:6}}>Title:</span>
          <span className="v">Head of Compliance Operations / KYC-AML</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">[redacted]@[asset-manager].com</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">[Tier-1 Buy-Side · $50B+ AUM]</span>
        </div>
      </div>
      <div className="slack-engagement">
        <div className="slack-engagement-head">📊 Engagement</div>
        <div className="slack-engagement-line">• Last meaningful activity: <strong>25d ago</strong></div>
        <div className="slack-engagement-line">• Pattern: <em>Demo without follow-up call</em></div>
      </div>
      <div className="slack-block" style={{marginTop:10}}>
        <span style={{fontSize:12.5,color:"#fff",fontWeight:600}}>📞 TODAY · PHONE → Head of Compliance Ops</span>
      </div>
      <div className="slack-quote">
        It&rsquo;s [AE] from causaLens. You sat in on a demo with [SE] on May 27, 22 minutes on the KYC/AML Digital Worker — 105K screening alerts/month automated, 80%+ analyst time back. I&rsquo;d like 15 minutes this week to show the same view filtered to your jurisdiction mix and current alert volumes. Does Tuesday or Wednesday work for you?
      </div>
      <div className="slack-callout">📞 If voicemail: [AE] from causaLens, following up on [SE]&rsquo;s May 27 demo on the KYC/AML Digital Worker. I&rsquo;ll text you a quick note.</div>
      <div className="slack-callout" style={{color:"#A8AFC0",marginTop:8}}>
        <strong style={{color:"#fff"}}>Why now:</strong> Demo held 25 days ago; zero follow-up call or email since. Renewal-readiness window open.
      </div>
      <div className="slack-callout" style={{color:"#A8AFC0",marginTop:6,fontSize:11.5}}>
        <em>If no contact:</em> SMS on day 3 — reference call attempt, offer Tue/Wed slot. Email on day 5 — new angle on the IT Risk Mitigation Digital Worker (20x ROI Tier-1 Hedge Fund).
      </div>
      <div className="slack-signals">
        <span className="sl">Signals observed:</span>
        <ul>
          <li>causaLens demo with [SE] on May 27, 2026, 25 days ago, no outbound call or email logged since</li>
          <li>Demo content directly relevant to use case: KYC/AML automation, 105K alerts/month, 80%+ analyst time recovered</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 (metrics card style) ─────────────────────────────────────
function PhaseCompound() {
  const cards = [
    { l:"CAC", v:"−56%", d:"vs enterprise-rep hire", c:"pos" },
    { l:"Tier-1 meetings / quarter", v:"+189%", d:"90-day cohort avg", c:"pos" },
    { l:"Cycle time", v:"−40%", d:"demo → SAL", c:"pos" },
    { l:"Time to insight", v:"−72%", d:"signal → action", c:"pos" },
  ];
  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 causaLens GTM team.<br/>Friday: enterprise account MBR.<br/>Quarterly: board math you can defend.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>The Analytics Agent surfaces what to do next. The operator-CRO walks the room through the plan. Every reply, every meeting, every closed Digital Worker deal makes the system 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 enterprise account that comes through AICRO<br/>makes the next anchor sharper.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>The lookalike playbook tightens with every closed Tier-1. Quarterly refresh based on which vertical (BFSI, Pharma, Energy, Enterprise Tech) closed fastest. Ramp accelerators tied to AICRO-sourced wins. The system pays for itself before the QBR.</p>
        </div>
      </div>
    </div>
  );
}

// ─── System tabs ─────────────────────────────────────
function SignalToScale() {
  const phases = [
    {
      num:"PHASE 01", title:"Detect", head:"Detect the signal.",
      body:"AI scans 50+ live data sources continuously across the four lookalike verticals: BFSI, Pharma, Energy, Enterprise Tech. The CRO bench defines the qualification logic. The signal map is built for your motion, not a generic ICP.",
      Render: PhaseDetect,
    },
    {
      num:"PHASE 02", title:"Outreach", head:"Intelligent outreach.",
      body:"Three products, one campaign. AICRO Send runs the email engine. AICRO Connect runs LinkedIn in parallel. The Outreach Agent personalizes every message from the 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 CRM, recommends the next action, and routes it to the rep — in Slack, in HubSpot, in Salesforce.",
      Render: PhaseConvert,
    },
    {
      num:"PHASE 04", title:"Compound", head:"Compound performance.",
      body:"The Analytics Agent surfaces what to do next. Every reply, every meeting, every won deal sharpens the system. 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">03 / The system</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} data-phase={i} className={"s2s-tab " + (i === active ? "active" : "")} onClick={() => setActive(i)} role="button" tabIndex={0}>
                <span className="num">{ph.num}</span>
                <span className="title">{ph.title}</span>
                <span className="s2s-hint">→ Click to view</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>
  );
}

// ─── CRO Stack ─────────────────────────────────────
function CROStack() {
  const modules = [
    { l:"Strategy", t:"ICP & Signal Map", d:"Lookalike-anchor analysis across the four verticals (BFSI, Pharma, Energy, Enterprise Tech). Sub-ICP segmentation per vertical. Signal map for validation cues, not gating.", delivs:["Anchor-firm scorecard","Cross-vertical Tier-1 / Tier-2 ICP","Signal map · 7 sources","Quarterly refresh"] },
    { l:"Playbooks", t:"Productized SOPs", d:"Discovery scripts, demo flows, objection matrices, written for the C-suite personas in your ICP card. Real documents your team operates from day one.", delivs:["Discovery script · CDO/CAIO/CRO/CCO/CDigO","Demo flow + close path","Objection matrix","Onboarding checklist"] },
    { l:"Comp", t:"Commission Structures", d:"Ramp accelerators, new-logo SPIFFs, override design. Calibrated to a $300K subscription motion with 3-month payback.", delivs:["Ramp plan · 90/180/365","New-logo accelerator","Expansion override","Board-defendable model"] },
    { l:"Onboarding", t:"Operator Cadence", d:"Monday signal review. 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">06 / The CRO Stack</span>
          <h2>One operator-built system. Not five SaaS tools and a hope.</h2>
          <p>You already have the product. What you need next is a proven motion, not another logo on the stack. Strategy, playbooks, comp design, and onboarding, run as one system by people who&rsquo;ve done it before.</p>
        </div>
        <div className="cro-stack">
          <div className="cro-tree">
            <div className="cro-node lead">
              <span className="role">Fractional CRO</span>
              <span className="name">Operator-built · CREXi ($70M), Pacaso, Capitalize ($2M+ pipeline / 10mo)</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, signal map, intent scoring</span>
              </div>
              <div className="cro-node">
                <span className="role">Outbound Operator</span>
                <span className="name">Daily campaign management</span>
              </div>
              <div className="cro-node">
                <span className="role">RevOps Engineer</span>
                <span className="name">CRM build, agent deploy, data</span>
              </div>
              <div className="cro-node">
                <span className="role">Enablement Lead</span>
                <span className="name">Playbooks, deal coaching</span>
              </div>
            </div>
          </div>
          <div className="cro-modules">
            {modules.map((m,i) => (
              <div className="cro-mod" key={i}>
                <span className="mlbl">{m.l}</span>
                <span className="mtitle">{m.t}</span>
                <span className="mdesc">{m.d}</span>
                <ul className="mdelivs">
                  {m.delivs.map((d,j) => <li key={j}>{d}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── ICP DATA ─────────────────────────────────────
const ICP_DATA = {
  causalens: {
    label: "causaLens (Cross-Vertical Lookalike)",
    sub: "BFSI · Pharma · Energy · Enterprise Tech · Sample projection",
    sample: true,
    summary: "Sample · projected pilot trajectory across the four lookalike verticals.",
    summaryBody: "Sample · projected pilot trajectory. Lookalike-matched accounts across BFSI, Pharma, Energy, and Enterprise Tech are receiving sequences off the anchor list in your ICP card. Reply rates compound week-over-week through Month 2. AICRO Connect's accept rate holds in the mid-40s on C-suite profiles. Of the projected 14 booked meetings, 6 land as active opportunities tied to Digital Worker use cases (model governance, regulatory reporting, ops efficiency, AI explainability).",
    kpis: { sent:"14,250", positives:"64", meetings:"14", pipeline:"$1.8M", revenue:"Pilot in progress" },
    deltas: { sent:"+38% last 30d", positives:"+71% last 30d", meetings:"+86% last 30d", pipeline:"+180% last 30d", revenue:"Pilot in progress" },
    ratio: "222:1",
    campaigns: [
      { type:"em", name:"EM | BFSI · Treasury & Operations · Tier-1 Banks", sent:"4,820", contacted:"3,140", connReq:"-", connAcc:"-", positives:"22", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | BFSI · CRO/CCO · Investment Banks", sent:"284", contacted:"248", connReq:"248", connAcc:"118", positives:"18", posRate:"54.5%", accept:"47.6%", active:true },
      { type:"em", name:"EM | Pharma · CDO / Head of AI · Top 20", sent:"3,120", contacted:"2,040", connReq:"-", connAcc:"-", positives:"12", posRate:"21.8%", accept:"-" },
      { type:"li", name:"LI | Energy · Chief Digital Officer · Majors", sent:"212", contacted:"176", connReq:"176", connAcc:"82", positives:"8", posRate:"42.1%", accept:"46.6%" },
      { type:"em", name:"EM | Enterprise Tech · Head of AI / Data", sent:"1,980", contacted:"1,288", connReq:"-", connAcc:"-", positives:"4", posRate:"15.4%", accept:"-" },
    ],
    drawer: {
      name: "LI | BFSI · CRO/CCO · Investment Banks",
      replies: 26, posPct: 69.2, neuPct: 30.8,
      funnel: [
        { stage:"Connection Requests", val:248, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:248, w:100, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"100%" },
        { stage:"Accepted", val:118, w:48, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"47.6%" },
        { stage:"Replied", val:26, w:22, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"22.0%" },
        { stage:"Positive", val:18, w:16, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"69.2%" },
        { stage:"Meetings", val:6, w:8, color:"#0E9F66", pct:"33.3%" },
        { stage:"Pipeline $", val:1, w:5, color:"#0E9F66", pct:"$1.8M" },
        { stage:"Revenue", val:0, w:1, color:"#CBD5E1", pct:"Pilot" },
      ],
      recent: [
        { name:"Tier-1 Investment Bank · Head of Model Risk", date:"Jun 24", tag:"Meeting Booked", booked:true },
        { name:"Top-5 Pharma · Chief Data Officer", date:"Jun 23", tag:"Interested" },
        { name:"Tier-1 Universal Bank · CCO", date:"Jun 22", tag:"Interested" },
        { name:"Energy Major · Chief Digital Officer", date:"Jun 21", tag:"Meeting Booked", booked:true },
        { name:"Top-5 Asset Manager · Head of AI Governance", date:"Jun 20", tag:"Interested" },
        { name:"Enterprise Tech · Chief AI Officer", date:"Jun 19", tag:"Interested" },
        { name:"Tier-1 Investment Bank · Head of Treasury", date:"Jun 18", tag:"Interested" },
      ],
    },
  },
  saas: {
    label: "B2B SaaS",
    sub: "$20–100M ARR · Series B",
    summary: "LinkedIn outperforming email, senior buyers responding.",
    summaryBody: "LinkedIn landed 1 positive for every 7 messages this month. This week it's converting at 1 per 5 messages, ahead of the monthly average. We're seeing EVPs, Managing Directors, and Senior VPs asking to schedule time, a strong signal of genuine interest. Email was quieter this week, but LinkedIn's improving efficiency points to a stronger overall positive rate ahead.",
    kpis: { sent:"52,250", positives:"160", meetings:"14", pipeline:"$2.4M", revenue:"—" },
    deltas: { sent:"+32% last 30d", positives:"+84% last 30d", meetings:"+100% last 30d", pipeline:"+100% last 30d", revenue:"Coming soon" },
    ratio: "327:1",
    campaigns: [
      { type:"li", name:"LI | COLD General | 21-April-2026", sent:"0", contacted:"0", connReq:"0", connAcc:"0", positives:"0", posRate:"0.0%", accept:"0.0%" },
      { type:"em", name:"EM | Core | COLD GENERAL | 20-April-26", sent:"0", contacted:"0", connReq:"-", connAcc:"-", positives:"0", posRate:"0.0%", accept:"-" },
      { type:"em", name:"EM | Core | Investment Sales v2", sent:"3,302", contacted:"1,748", connReq:"-", connAcc:"-", positives:"2", posRate:"16.7%", accept:"-" },
      { type:"li", name:"LI | Core | Investment Sales v2 (Grade A)", sent:"13", contacted:"13", connReq:"88", connAcc:"15", positives:"1", posRate:"100.0%", accept:"17.0%", active:true },
      { type:"li", name:"LI | Closed Deal | Others", sent:"116", contacted:"82", connReq:"82", connAcc:"62", positives:"12", posRate:"70.6%", accept:"44.6%" },
    ],
    drawer: {
      name: "LI | Closed Deal | Others",
      replies: 19, posPct: 68.0, neuPct: 31.6,
      funnel: [
        { stage:"Connection Requests", val:116, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:82, w:71, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"44.8%" },
        { stage:"Accepted", val:62, w:54, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"44.6%" },
        { stage:"Replied", val:17, w:24, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"32.7%" },
        { stage:"Positive", val:12, w:18, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"70.6%" },
        { stage:"Meetings", val:0, w:1, color:"#CBD5E1", pct:"0.0%" },
        { stage:"Pipeline $", val:0, w:1, color:"#CBD5E1", pct:"-" },
        { stage:"Revenue", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Lauren Rogers", date:"Apr 24", tag:"Interested" },
        { name:"Aidan McClelland", date:"Apr 24", tag:"Interested" },
        { name:"Isaiah Shatz", date:"Apr 23", tag:"Meeting Booked", booked:true },
        { name:"Jonathan Gerszberg", date:"Apr 23", tag:"Interested" },
        { name:"Isaiah Shatz", date:"Apr 23", tag:"Interested" },
        { name:"Mir Ali", date:"Apr 20", tag:"Interested" },
        { name:"Matt Cawley", date:"Apr 20", tag:"Interested" },
      ],
    },
  },
  cre: {
    label: "Commercial Real Estate Tech",
    sub: "Marketplace · Growth-stage",
    summary: "Senior brokers replying within the hour.",
    summaryBody: "AICRO Send is hitting Managing Directors and Capital Markets leads inside 60 minutes of a fresh signal. Reply rates on the CRE motion compounded 22% week-over-week. AICRO Connect's accept rate held at 47%; the funnel narrowed at meeting-set, which is a battlecard issue we're fixing this week.",
    kpis: { sent:"38,140", positives:"212", meetings:"22", pipeline:"$18.2M", revenue:"$2.1M" },
    deltas: { sent:"+18% last 30d", positives:"+62% last 30d", meetings:"+47% last 30d", pipeline:"+183% last 30d", revenue:"+92% last 30d" },
    ratio: "180:1",
    campaigns: [
      { type:"li", name:"LI | CRE Capital Markets | National", sent:"412", contacted:"380", connReq:"380", connAcc:"178", positives:"24", posRate:"54.5%", accept:"46.8%" },
      { type:"em", name:"EM | Core | Loan Brokers Q2", sent:"6,820", contacted:"4,210", connReq:"-", connAcc:"-", positives:"38", posRate:"22.4%", accept:"-" },
      { type:"li", name:"LI | Closed Deal | CRE Origination", sent:"94", contacted:"71", connReq:"71", connAcc:"54", positives:"18", posRate:"73.5%", accept:"58.2%", active:true },
      { type:"em", name:"EM | Asset Management Heads", sent:"2,140", contacted:"1,388", connReq:"-", connAcc:"-", positives:"14", posRate:"19.7%", accept:"-" },
      { type:"li", name:"LI | COLD General | 18-April-2026", sent:"203", contacted:"148", connReq:"148", connAcc:"58", positives:"4", posRate:"42.1%", accept:"39.2%" },
    ],
    drawer: {
      name: "LI | Closed Deal | CRE Origination",
      replies: 28, posPct: 73.5, neuPct: 26.5,
      funnel: [
        { stage:"Connection Requests", val:94, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:71, w:76, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"58.2%" },
        { stage:"Accepted", val:54, w:58, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"56.4%" },
        { stage:"Replied", val:24, w:28, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"44.4%" },
        { stage:"Positive", val:18, w:22, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"73.5%" },
        { stage:"Meetings", val:7, w:14, color:"#0E9F66", pct:"38.9%" },
        { stage:"Pipeline $", val:1, w:6, color:"#0E9F66", pct:"$2.4M" },
        { stage:"Revenue", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Dana Reyes", date:"Apr 25", tag:"Meeting Booked", booked:true },
        { name:"Ari Goldman", date:"Apr 24", tag:"Interested" },
        { name:"Sam Ortega", date:"Apr 24", tag:"Interested" },
        { name:"Rae Whitman", date:"Apr 23", tag:"Meeting Booked", booked:true },
        { name:"Theo Lim", date:"Apr 22", tag:"Interested" },
        { name:"Mara Chen", date:"Apr 21", tag:"Interested" },
        { name:"Jordan Vale", date:"Apr 20", tag:"Interested" },
      ],
    },
  },
  consumer: {
    label: "Consumer Brands",
    sub: "DTC · Growth-stage",
    summary: "Wholesale buyers booking before peak season.",
    summaryBody: "Q4 is closing window for wholesale. AICRO Connect is landing meetings with Heads of Wholesale at Caraway, Brightland, and Our Place. Email is doing the volume; LinkedIn is doing the closing. The Outreach Agent flagged 4 retailer-RFP signals this week — all routed to the right AE inside 4 minutes.",
    kpis: { sent:"41,820", positives:"178", meetings:"19", pipeline:"$1.8M", revenue:"$340K" },
    deltas: { sent:"+27% last 30d", positives:"+91% last 30d", meetings:"+84% last 30d", pipeline:"+212% last 30d", revenue:"+134% last 30d" },
    ratio: "235:1",
    campaigns: [
      { type:"em", name:"EM | DTC | Wholesale Buyers Q4", sent:"4,820", contacted:"3,140", connReq:"-", connAcc:"-", positives:"42", posRate:"28.4%", accept:"-" },
      { type:"li", name:"LI | Heads of Wholesale", sent:"312", contacted:"264", connReq:"264", connAcc:"112", positives:"22", posRate:"61.1%", accept:"42.4%", active:true },
      { type:"em", name:"EM | Retail Buyers | Williams Sonoma + Target", sent:"1,840", contacted:"1,124", connReq:"-", connAcc:"-", positives:"18", posRate:"24.0%", accept:"-" },
      { type:"li", name:"LI | Expo West Follow-up", sent:"148", contacted:"112", connReq:"112", connAcc:"48", positives:"9", posRate:"52.9%", accept:"42.9%" },
      { type:"em", name:"EM | Whole Foods Regional Buyers", sent:"640", contacted:"412", connReq:"-", connAcc:"-", positives:"6", posRate:"18.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | Heads of Wholesale",
      replies: 36, posPct: 61.1, neuPct: 38.9,
      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:"42.4%" },
        { stage:"Accepted", val:112, w:36, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"42.4%" },
        { stage:"Replied", val:36, w:14, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"32.1%" },
        { stage:"Positive", val:22, w:9, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"61.1%" },
        { stage:"Meetings", val:8, w:4, color:"#0E9F66", pct:"36.4%" },
        { stage:"Pipeline $", val:1, w:3, color:"#0E9F66", pct:"$340K" },
        { stage:"Revenue", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Lena Ross", date:"Apr 25", tag:"Meeting Booked", booked:true },
        { name:"Jules Wei", date:"Apr 24", tag:"Interested" },
        { name:"Cam Pritchard", date:"Apr 23", tag:"Interested" },
        { name:"Ana Soto", date:"Apr 22", tag:"Meeting Booked", booked:true },
        { name:"Maya Kim", date:"Apr 21", tag:"Interested" },
        { name:"Drew Bates", date:"Apr 20", tag:"Interested" },
        { name:"Rina Park", date:"Apr 19", tag:"Interested" },
      ],
    },
  },
};

// ─── Sparkline ─────────────────────────────────────
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>
  );
}

// ─── AreaChart ─────────────────────────────────────
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 (Executive Summary style) ─────────────────────────────────────
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 / executive-summary
        </div>
        <div style={{fontSize:11,color:data.sample ? "#D97706" : "var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",fontWeight: data.sample ? 600 : 400}}>{data.label.toUpperCase()} · {data.sample ? "SAMPLE" : "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) => {
                  const totalH = 100;
                  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">Meetings 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">Revenue</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">{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">● 1 Bad ICP &nbsp; {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>
  );
}

// ─── Client Portal — actual product screenshots the causaLens team will live in ─────────────
function ClientPortalScreenshots() {
  const shots = [
    {
      src: "uploads/pasted-1777222339189-0.png",
      label: "Executive Summary",
      caption: "Last 30 days, cross-vertical lookalike view. Email plus LinkedIn side by side, weekly positive replies, every campaign with full funnel. The view the causaLens GTM 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. The 70.6% positive rate on Closed-Deal lookalikes is real AICRO client data, anonymized for this deck.",
    },
    {
      src: "uploads/pasted-1777222050657-0.png",
      label: "Reply Agent · live in Slack",
      caption: "Inbound reply hits Slack immediately, classified positive, generated response drafted and approved by the operator before send. Real reply, name redacted for this deck.",
    },
    {
      src: "uploads/pasted-1777222220819-0.png",
      label: "Sales Action · AICRO Rounds",
      caption: "Stalled opportunity, 25 days since last touch. AICRO Rounds grades it Grade A, recommends the AE, and writes the script. Account and contact redacted for this deck.",
    },
  ];
  return (
    <section className="section section-soft" id="portal-screenshots">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">05 / 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 for this deck. We don&rsquo;t hide behind our numbers.</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)"}}>04 / Flagship</span>
          <h2>The Client Portal you operate from.</h2>
          <p style={{color:"rgba(255,255,255,.6)"}}>
            One pane of glass, every Monday. Executive summary, channel comparison, every campaign with its full funnel. Click an active campaign to drill in.
          </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 ICP →</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>
  );
}

// ─── Cost compare ─────────────────────────────────────
function CostCompare() {
  return (
    <section className="section section-soft" id="economics">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">07 / Economics</span>
          <h2>What this costs, and what it doesn&rsquo;t promise.</h2>
          <p>Same outcome target: Tier-1 enterprise meetings booked, anchored to your lookalike thesis. Two cost profiles. One commitment we won&rsquo;t make.</p>
        </div>
        <div className="cost-grid">
          <div className="cost-card">
            <div className="cost-eyebrow">Traditional approach</div>
            <h3>Build it yourself.</h3>
            <p style={{color:"var(--slate-500)",fontSize:14,marginTop:6}}>1 enterprise rep + 1 SDR + a manager for 9 to 12 months.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">1 enterprise rep + 1 SDR (loaded)</span><span className="val">$240 to $320K</span></div>
              <div className="cost-list-row"><span className="label">Manager oversight</span><span className="val">$140K</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">Ramp time</span><span className="val">9 to 12 months for first qualified Tier-1 meeting</span></div>
              <div className="cost-list-row"><span className="label">Annual turnover</span><span className="val">30 to 40%</span></div>
              <div className="cost-list-row total"><span className="label">Year 1 commitment</span><span className="val">$420 to $510K</span></div>
            </div>
            <div className="cost-meta">Plus 9 to 12 months of stalled Tier-1 pipeline before you know if the build works.</div>
          </div>
          <div className="cost-card aicro">
            <div className="cost-eyebrow">AICRO · causaLens pilot</div>
            <h3>$10,000 / month. 2-month pilot.</h3>
            <p style={{color:"rgba(255,255,255,.65)",fontSize:14,marginTop:6}}>Operator-CRO + delivery team + product platform. 75 dedicated domains. One bill. One owner.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">Setup Period</span><span className="val">No cost · begins on signed contract + funds received</span></div>
              <div className="cost-list-row"><span className="label">Pilot Period</span><span className="val">2 months · $10,000 / month</span></div>
              <div className="cost-list-row"><span className="label">75 dedicated email domains</span><span className="val">Built and warmed before kickoff</span></div>
              <div className="cost-list-row"><span className="label">First booked meetings</span><span className="val">target Day 30 to 45</span></div>
              <div className="cost-list-row"><span className="label">SAL floor (Month 2)</span><span className="val">5 SALs / month or terminate</span></div>
              <div className="cost-list-row total"><span className="label">One bill</span><span className="val">causaLens owns the lead data</span></div>
            </div>
            <div className="cost-meta">AICRO guarantees the system, the playbook, the inbound, and the operator in your room weekly. The Pilot Period has a SAL floor: if Month 2 delivers fewer than 5 Sales Accepted Leads, you can terminate with 10 days&rsquo; notice, owing only that month.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Case studies ─────────────────────────────────────
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: "Lucra Sports",
      stage: "Growth-stage",
      sector: "Consumer · Sports Tech",
      quote: "AICRO didn&rsquo;t just generate pipeline. They closed 40% of our Q1 business.",
      attr: "Lucra Sports · Q1 2026",
      systems: ["Signal-First Outbound", "Multi-Channel Sequencing", "Reply Triage + Sales Action", "CRO-led Pipeline Math"],
      metrics: [
        { v: "40%", l: "of Q1 closed business", live: true },
        { v: "Q1 2026", l: "POC → contract" },
        { v: "1 partner", l: "vs. 3 vendors" },
        { v: "End-to-end", l: "Growth system" },
      ],
    },
    {
      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" },
      ],
    },
  ];
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">08 / Proof</span>
          <h2>Three engagements. 40% of one client&rsquo;s quarter, $75M+ pipeline at another.</h2>
          <p>Live metrics still pulsing in the AICRO data layer where engagements are active.</p>
        </div>
        <div className="cs-grid">
          {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: "AICRO Send · Email Engine",
      desc: "75 warmed inboxes · enterprise-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 + a causaLens GTM seat (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: "Hyper-Personalization Layer",
      desc: "Per-account hook on every send · operator-approved",
      bars: [
        { left: 0, width: 14, label: "TEMPLATE LIBRARY", cls: "amber" },
        { left: 14, width: 56, label: "A/B TEST + REFINE", cls: "sky" },
        { left: 70, width: 30, label: "ICP-TUNED HOOKS", cls: "mint" },
      ],
      delivs: [
        { left: 14, label: "Day 14 · templates" },
        { left: 30, label: "Day 30 · A/B test" },
        { left: 50, label: "Day 60 · ICP-tuned" },
      ],
    },
    {
      name: "CRO + Reply Triage",
      desc: "Operator in the room weekly · AICRO 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">09 / The 90-day build</span>
          <h2>Day 1 to Day 120, in deliverables you can hold.</h2>
          <p>Day 1 starts on signed contract + funds received. The Setup Period hardens 75 domains and aligns the ICP. The Pilot Period ships first sequences by Day 14 and first Tier-1 meetings by Day 30 to 45. 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 meetings</span></div>
            <div className="col">Day 60<span className="day">Compounding</span></div>
            <div className="col">Day 90<span className="day">Board math</span></div>
            <div className="col">Day 120<span className="day">Scale-up cohort</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 className="gantt-legend"><span className="sw" style={{background:"#0E9F66"}}></span>Refine from real data</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CTA — Get started (founder close, contract already in hand) ─────────────
function CTA() {
  const founderCard = {
    background:"rgba(255,255,255,0.04)",
    border:"1px solid rgba(255,255,255,0.10)",
    borderRadius:14,
    padding:"22px 24px",
    display:"flex",
    flexDirection:"column",
    gap:6,
    flex:1,
    minWidth:240,
  };
  const founderLabel = {
    fontFamily:"'JetBrains Mono',monospace",
    fontSize:10,
    letterSpacing:"0.14em",
    textTransform:"uppercase",
    color:"rgba(255,255,255,0.55)",
    fontWeight:600,
    marginBottom:4,
  };
  const founderName = {fontSize:17,fontWeight:600,color:"#fff",lineHeight:1.3,letterSpacing:"-0.01em"};
  const founderRole = {fontSize:12,color:"rgba(255,255,255,0.65)",lineHeight:1.5,marginTop:2};
  const founderEmail = {fontSize:14,color:"#21A8F2",textDecoration:"none",fontWeight:500,marginTop:8};
  return (
    <section className="section" id="cta">
      <div className="wrap">
        <div className="cta-block">
          <div className="cta-block-bg"></div>
          <div className="cta-left" style={{flex:1}}>
            <span className="eyebrow" style={{color:"rgba(255,255,255,.5)"}}>10 / Get started</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>You have everything. The pilot starts the moment the contract is signed.</h2>
            <p>75 domains warm and waiting. The lookalike anchors loaded. The operator team in your room. 2-month pilot, one bill, one owner. Thank you, for the work that got us here.</p>
            <div style={{marginTop:36,display:"flex",gap:18,flexWrap:"wrap"}}>
              <div style={founderCard}>
                <span style={founderLabel}>Co-Founder</span>
                <span style={founderName}>Doug Shankman</span>
                <span style={founderRole}>AICRO</span>
                <a href="mailto:doug@aicro.co" style={founderEmail}>doug@aicro.co</a>
              </div>
              <div style={founderCard}>
                <span style={founderLabel}>Co-Founder</span>
                <span style={founderName}>Josh Kulchin</span>
                <span style={founderRole}>AICRO</span>
                <a href="mailto:josh@aicro.co" style={founderEmail}>josh@aicro.co</a>
              </div>
            </div>
            <div style={{marginTop:36,paddingTop:18,borderTop:"1px solid rgba(255,255,255,0.08)",fontSize:11,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",color:"rgba(255,255,255,0.45)"}}>
              RENOIR LLC D/B/A AICRO · WYOMING REGISTERED · 2-MONTH PILOT · LEAD DATA OWNERSHIP: CAUSALENS
            </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">SIGNAL-TO-SCALE · CAUSALENS</span>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:2,fontSize:13}}>
        <span>Doug Shankman, Co-Founder · <a href="mailto:doug@aicro.co" style={{color:"inherit"}}>doug@aicro.co</a></span>
        <span>Josh Kulchin, Co-Founder · <a href="mailto:josh@aicro.co" style={{color:"inherit"}}>josh@aicro.co</a></span>
      </div>
      <div className="footer-meta">© 2026 AICRO · Built by operators</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 dark={t.darkHero}/>
      <PipelineTrap/>
      <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="ICP"
          value={t.icp}
          options={[
            {value:"causalens", label:"causaLens (Cross-Vertical Lookalike · sample)"},
            {value:"saas", label:"B2B SaaS"},
            {value:"cre", label:"CRE Tech"},
            {value:"consumer", label:"Consumer Brands"},
          ]}
          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 the LinkedIn campaign drawer for each ICP.
        </div>
      </TweaksPanel>
    </Fragment>
  );
}

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