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

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

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>
  );
}

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">60 days</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#economics" className="btn btn-ghost btn-sm">Pilot terms</a>
          <a href="#cta" className="btn btn-primary btn-sm">Sign + 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 Shield Compliance · 2-month pilot · ready on signature</span>
        </div>
        <h1 style={{maxWidth:1080, textWrap:"balance"}}>
          Federal rescheduling resets the field.<br/>
          The next 200 institutions in cannabis<br/>
          are filing the SARs right now.<br/>
          <span style={{color:"#21A8F2"}}>We get there before LinkedIn does.</span>
        </h1>
        <p className="lead" style={{marginTop:24, maxWidth:780}}>
          75 warmed domains. 6-seat LinkedIn. Subject lines bank scrubbers don&rsquo;t drop. The same operating system Gumption runs, calibrated for BSA Officers and community-bank C-suites.
        </p>
        <div className="hero-cta-row">
          <a href="#economics" className="btn btn-primary btn-lg">See the pilot 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>
  );
}

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>
  ),
};

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

// ─── Buyer-truth bar — what Richard told us, reframed as constraints we built around ─────────────
function BuyerTruth() {
  const truths = [
    { lbl:"The TAM math", val:"~225 institutions actively bank cannabis. A third use Shield. A third sit with a competitor whose practices you described as borderline. The remaining third use no software at all. Plus the broader ~700 institutions filing marijuana-priority SARs that haven&rsquo;t formalized a program yet." },
    { lbl:"Why now is hard", val:"State-legalization expansion has slowed; only ten holdout states remain. The growth lever shifts from new state opens to displacement, the no-software third, and adjacent high-risk verticals." },
    { lbl:"What&rsquo;s coming", val:"Federal rescheduling from Schedule I to III meaningfully expands the institutions allowed to consider this LOB. The next 18 months reset who is in-market." },
    { lbl:"What&rsquo;s broken in cold today", val:"Subject lines containing &ldquo;cannabis&rdquo; are scrubbed by bank security tooling before a human ever sees them. Sequencer-based outbound from a single domain compromises the main domain &mdash; the same domain BSA Officers verify when they Google you." },
  ];
  return (
    <section className="section section-soft" id="buyer-truth">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>From the conversation · 29 Apr</span>
          <h2>The constraints this proposal is built around.</h2>
          <p>Everything below assumes the market framing from our call is correct. The system is engineered for a small, defensible TAM where the next decision is made before LinkedIn ever announces it, where bank security tooling drops the wrong subject line, and where the next twelve months are about displacement and rescheduling rather than state opens.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:14,marginTop:28}}>
          {truths.map((t,i) => (
            <div key={i} 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:8}} dangerouslySetInnerHTML={{__html:t.lbl}}></div>
              <div style={{fontSize:14.5,color:"var(--slate-700)",lineHeight:1.55}} dangerouslySetInnerHTML={{__html:t.val}}></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Pipeline trap ─────────────────────────────────────
function PipelineTrap() {
  const traps = [
    {
      ix: "01 / GENERIC OUTBOUND AGENCY",
      title: "Hire a $3K–$5K/mo shop that has never sold to a BSA Officer.",
      body: "The copy uses \"cannabis\" and \"marijuana\" in subject lines. Bank security tooling drops it. The agency reports send volume, not bookings. By month three you&rsquo;re re-litigating the ICP with someone who has no background in BSA/AML or NCUA exam cycles.",
      killers: ["No BSA/AML vocabulary", "Wrong words in subject lines", "Reports volume, not opens"],
      cost: "$36K–$60K/yr · 0 displacement wins",
    },
    {
      ix: "02 / IN-HOUSE ENTERPRISE SDR",
      title: "Hire one cannabis-fluent SDR + manager.",
      body: "There are not enough cannabis-fluent SDRs to hire. The first hire ramps in 9 months on a TAM of ~225 institutions plus the broader SAR-filing pool. By the time they ramp, federal rescheduling has reset the buyer set and you start over.",
      killers: ["9 months to first ramped meeting", "TAM does not justify the load", "30–40% annual SDR turnover"],
      cost: "$240K–$320K Year 1 (loaded)",
    },
    {
      ix: "03 / SALESFORCE HVS + ONE-AT-A-TIME",
      title: "What you&rsquo;re doing now. Founder + CEO writing email by hand, individually.",
      body: "It works for the 80 people you already know. It does not scale to the ~700 SAR-filing banks you don&rsquo;t. Salesforce HVS sends thousands of emails through one domain; three spam flags per thousand compromises Shield&rsquo;s main domain &mdash; the same domain BSA Officers verify when they Google you.",
      killers: ["Domain reputation at risk", "No coverage of the SAR-filing pool", "Founder time is the bottleneck"],
      cost: "Sales-flat quarter · founder hours as the constraint",
    },
  ];
  return (
    <section className="section section-soft" id="trap">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>The cannabis-banking outbound trap</span>
          <h2>Sales are flat &mdash; exactly the moment a category leader should invest in growth. Capital is tight &mdash; exactly when a wrong investment hurts most. The three obvious places to deploy the cash you do have each waste 6 to 9 months before federal rescheduling resets the field.</h2>
          <p>Every cannabis-banking software vendor at your stage tries at least one of these. The cost isn&rsquo;t the retainer or the salary. It&rsquo;s the quarters spent figuring out which channel works while a less thoughtful competitor &mdash; even one with a weaker product &mdash; gets there first.</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">Speed-to-lead</div>
          <div className="trap-cost-label">is the only competitive advantage in a TAM this defined. The competitor that gets in front of a peer-group president first wins the displacement, even if the product is weaker. The system below is built for that.</div>
        </div>
      </div>
    </section>
  );
}

// ─── Matrix ─────────────────────────────────────
function Matrix() {
  const cols = ["Agency", "In-house", "DIY stack", "AICRO"];
  const rows = [
    { row: "Speed to displacement win", vals: [1, 1, 2, 4], aicro: "First booked meetings Day 30 to 45" },
    { row: "BSA/AML + cannabis fluency", vals: [1, 2, 1, 4], aicro: "Operator-CRO reads filings, not just LinkedIn" },
    { row: "Domain protection", vals: [1, 2, 2, 4], aicro: "75 dedicated domains, main domain untouched" },
    { row: "Subject-line discipline", vals: [1, 3, 2, 4], aicro: "Never the keywords bank scrubbers drop" },
    { row: "CRM-native (Salesforce)", vals: [2, 2, 2, 4], aicro: "Salesforce native, deal-path conform" },
    { row: "Cost predictability", vals: [3, 1, 2, 4], aicro: "Single $10K/mo retainer, 2 months" },
  ];
  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 &mdash; in one engagement, inside Salesforce, paid as one monthly retainer. Built for a vendor whose buyer is a Chief Risk Officer reading SAR data, not a marketer reading a blog.</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 ─────────────────────────────────────
function SignalMapVisual() {
  const nodes = [
    { x:"24%", y:"26%", cls:"hot",   tag:"CHIEF RISK OFFICER",        co:"Community Bank · TX" },
    { x:"72%", y:"22%", cls:"hot",   tag:"BSA OFFICER",               co:"Credit Union · OK" },
    { x:"20%", y:"74%", cls:"warm",  tag:"HEAD OF COMPLIANCE",        co:"Mid-tier Bank · NC" },
    { x:"82%", y:"58%", cls:"warm",  tag:"PRESIDENT / CEO",           co:"Community Bank · KY" },
    { x:"45%", y:"8%",  cls:"match", tag:"CHIEF COMPLIANCE OFFICER",  co:"Community Bank · IN" },
    { x:"68%", y:"78%", cls:"hot",   tag:"COO",                       co:"Mid-tier Bank · NE" },
    { x:"14%", y:"48%", cls:"warm",  tag:"BSA / AML SPECIALIST",      co:"Credit Union · GA" },
    { x:"55%", y:"86%", cls:"match", tag:"HEAD OF COMMERCIAL",        co:"Community Bank · WI" },
  ];
  const sources = [
    { pos:{left:16,top:16},     t:"FinCEN SAR Stats" },
    { pos:{right:16,top:16},    t:"State legalization & rescheduling" },
    { pos:{left:16,bottom:16},  t:"BSA / Compliance hires (12mo)" },
    { 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">Institutions matched</span>
        <span className="v">312</span>
        <span className="s">↑ 6 newly SAR-filing this month</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:"FinCEN SAR Stats — institutions filing marijuana-priority SARs", val:"Public quarterly data + AICRO match layer" },
    { lbl:"First-time / accelerating SAR filers (in or pre-program)", val:"AICRO trend monitor on FinCEN releases" },
    { lbl:"BSA Officer / CCO / Cannabis Compliance hires (12mo)", val:"RevenueBase + LinkedIn parsing" },
    { lbl:"Federal rescheduling exposure — institutions affected by Schedule III", val:"AICRO regulatory signal layer" },
    { lbl:"State legalization / expansion movement (10 holdout states)", val:"AICRO news monitor" },
    { lbl:"Adjacent-vertical lookalikes — hemp / CBD / MSB / gaming compliance", val:"AICRO cross-vertical match" },
    { lbl:"Closed-won lookalikes from Shield CRM (week 4+)", val:"Salesforce data" },
  ];
  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, loosely affiliated with shieldbanking.com. Calibrated for bank-security inbox patterns: subject lines that pass the scrubber, no \"cannabis\" / \"marijuana\" keywords in subject or preview, BSA-fluent vocabulary, no links in the first email, ≤15 sends per inbox per day.",
      feats:["75+ warm domains", "Subject-line scrubber discipline", "Main domain untouched"],
      stats:[ {v:"15/day", l:"per inbox cap"}, {v:"0%", l:"main-domain risk"} ],
    },
    {
      mark:"connect",
      name:"AICRO Connect",
      tag:"LINKEDIN AUTOMATION",
      desc:"Multi-seat orchestration across the 6 LinkedIn profiles you already have on the team. Connection requests, follow-ups, and first-DMs sequenced as one campaign across the BSA / Risk / Compliance personas, plus the smaller-bank C-suite where the buyer is the President or CEO.",
      feats:["6-seat orchestration", "≤40 invites / day / seat", "Recency-gated targeting"],
      stats:[ {v:"40-50%", l:"accept rate target"}, {v:"Active LI", l:"only — no spend on dormant"} ],
    },
    {
      mark:"agent",
      name:"AICRO Outreach Agent",
      tag:"HYPER-PERSONALIZATION LAYER",
      desc:"Reads each institution&rsquo;s public regulatory exposure (recent SAR-filing trend, NCUA / OCC exam outcomes, board-meeting agenda topics) and the prospect&rsquo;s recent role context. Drafts one relevance line off the signal that triggered the touch &mdash; not a feature pitch. Matches Shield&rsquo;s content-led, resource-sharing voice.",
      feats:["Signal-grounded copy", "Resource-share posture", "Operator-approved before send"],
      stats:[ {v:"+37%", l:"acceptance vs. generic"}, {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> Buster Richards</div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Name:</span>
          <span className="v">[Redacted] · Mid-tier Community Bank</span>
          <span className="k" style={{marginTop:6}}>Job Title:</span>
          <span className="v">Chief Risk Officer / BSA Officer</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">[Redacted Community Bank · ~$2B in assets]</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">[redacted].cro@[bank].com</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">LI | CRO/BSA · First-time SAR filers · Q3</span>
        </div>
      </div>
      <div className="slack-pill"><span className="pdot"></span>Resource: Cannabis Banking Playbook</div>
      <div className="slack-block">
        <span className="lbl">Last Reply:</span>
        <span className="val">Thanks for the playbook. Board is asking us to revisit this LOB given the rescheduling news. Can you walk us through how peer institutions structured policies and risk assessments?</span>
      </div>
      <div className="slack-block">
        <span className="lbl">Generated Response:</span>
        <span className="val">Yes &mdash; that&rsquo;s the most common board ask we&rsquo;re seeing this quarter. Sending you the policy + risk-assessment templates four community banks your size adopted last year. If useful, happy to put 20 minutes on the calendar with our CEO Buster Richards (25 years in banking, runs the program walk-throughs personally).</span>
      </div>
      <div className="slack-actions">
        <span className="slack-action"><span className="pdot" style={{width:7,height:7,borderRadius:"50%",background:"#21A8F2"}}></span>Send</span>
        <span className="slack-action danger">Not An ICP</span>
        <span className="slack-action">📁 Playbook</span>
        <span className="slack-action">📋 Salesforce</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>[Community Bank · $1.4B AUM] | Chief Compliance Officer</strong> · <span style={{color:"#A8AFC0"}}>$50K ACV · 3-yr term · Stage: Opportunity</span>
      </div>
      <div style={{fontSize:12,color:"#A8AFC0",marginBottom:10}}>Recommended for: Buster Richards / Richard Drennen</div>
      <div className="slack-source-line">
        <strong>Source:</strong> Salesforce · <strong>Run:</strong> AICRO Rounds · <strong>Close date:</strong> 2026-07-31
      </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">Chief Compliance Officer / BSA</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">[redacted]@[bank].com</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">[Community Bank · ~$1.4B in assets · TX]</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>Demo + playbook download, no follow-up call</em></div>
      </div>
      <div className="slack-block" style={{marginTop:10}}>
        <span style={{fontSize:12.5,color:"#fff",fontWeight:600}}>📞 TODAY · PHONE → CCO</span>
      </div>
      <div className="slack-quote">
        It&rsquo;s Buster from Shield. Following on the playbook your team downloaded May 4 and the demo with Richard May 11 &mdash; 22 minutes on the BSA / SAR-filing workflow. Two community banks your size adopted the policy template last quarter ahead of the rescheduling vote. I&rsquo;d like 15 minutes this week to walk through how they structured the board memo. Does Tuesday or Wednesday work?
      </div>
      <div className="slack-callout">📞 If voicemail: Buster from Shield, following on Richard&rsquo;s May 11 demo on the BSA/SAR workflow. 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 + playbook 22 days ago, zero follow-up since. Federal rescheduling vote dynamics have shifted board urgency at peer institutions.
      </div>
      <div className="slack-callout" style={{color:"#A8AFC0",marginTop:6,fontSize:11.5}}>
        <em>If no contact:</em> SMS day 3 — reference call attempt. Email day 5 — new angle on the policy template, attach the peer-bank board memo redacted.
      </div>
      <div className="slack-signals">
        <span className="sl">Signals observed:</span>
        <ul>
          <li>Demo with Richard on May 11, 2026, 22 days ago, no outbound call or email logged since</li>
          <li>Bank&rsquo;s SAR filings on cannabis-priority categories started accelerating Q1 2026 per FinCEN data</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 SDR + manager hire", c:"pos" },
    { l:"Booked meetings / quarter", v:"+165%", d:"60-day cohort target", c:"pos" },
    { l:"Cycle time", v:"−35%", 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 Richard.<br/>Friday: pipeline review with Buster.<br/>Bi-weekly: deal-level coaching.</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 demo, every closed BSA-Officer deal makes the playbook 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 closed bank sharpens the next signal.<br/>The TAM is small. The list gets tighter every week.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Closed-won lookalikes feed back into the SAR-filer scoring. Displacement wins from the &quot;borderline competitor&quot; cohort feed the battlecard. By Day 60 the system knows your buyer better than a new hire would by month nine.</p>
        </div>
      </div>
    </div>
  );
}

// ─── System tabs ─────────────────────────────────────
function SignalToScale() {
  const phases = [
    {
      num:"PHASE 01", title:"Detect", head:"Detect the signal &mdash; before it&rsquo;s public.",
      body:"AI scans FinCEN SAR Stats, regulatory filings, BSA/Compliance hires, state-level rescheduling movement, and adjacent-vertical lookalikes. The signal map is built for Shield&rsquo;s buyer, not a generic ICP. The point Richard made &mdash; \"if it&rsquo;s on LinkedIn we&rsquo;re too late\" &mdash; is exactly why we anchor on FinCEN data, board-meeting agenda topics, and compliance-officer hires.",
      Render: PhaseDetect,
    },
    {
      num:"PHASE 02", title:"Outreach", head:"Outreach calibrated for bank security tooling.",
      body:"Three products, one campaign. AICRO Send runs the email engine on 75 warmed domains with subject-line discipline (no \"cannabis\" / \"marijuana\" in subject or preview). AICRO Connect runs LinkedIn across the 6 seats Shield already has. The Outreach Agent personalizes every message in Shield&rsquo;s content-led, resource-sharing voice.",
      Render: PhaseOutreach,
    },
    {
      num:"PHASE 03", title:"Convert", head:"Convert in Slack, in Salesforce, in your inbox.",
      body:"The Reply Agent triages and drafts within minutes. The Inbound Sales Agent grades opportunities against Salesforce, recommends the next action, and routes it to Buster, Richard, or whoever owns the deal &mdash; in Slack, in Salesforce, in the master inbox.",
      Render: PhaseConvert,
    },
    {
      num:"PHASE 04", title:"Compound", head:"Compound performance with every closed bank.",
      body:"The Analytics Agent surfaces what to do next. Every reply, every demo, every won deal sharpens the system. Monday&rsquo;s signal review turns into the QBR Buster takes to the board.",
      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}} dangerouslySetInnerHTML={{__html:p.head}}></h3>
              <p style={{color:"var(--slate-500)",fontSize:15}} dangerouslySetInnerHTML={{__html:p.body}}></p>
            </div>
            <Body/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CRO Stack ─────────────────────────────────────
function CROStack() {
  const modules = [
    { l:"Strategy", t:"ICP & Signal Map", d:"Three-cohort segmentation: (1) the third using competitor software (displacement), (2) the third using no software at all, (3) the broader SAR-filing pool of ~700 institutions. Plus adjacent-vertical lookalikes (hemp / CBD / MSB / gaming).", delivs:["Three-cohort scorecard","SAR-filer match list","Signal map · 7 sources","Quarterly refresh tied to rescheduling milestones"] },
    { l:"Playbooks", t:"Productized SOPs", d:"Discovery scripts and demo flows written for the C-suite at small institutions and the BSA Officer / CCO at larger ones. Resource-share posture &mdash; matches Shield&rsquo;s gold-standard, content-led voice.", delivs:["Discovery script · CRO/CCO/BSA","Discovery script · President/CEO at community banks","Demo flow + Cannabis Banking Playbook positioning","Objection matrix"] },
    { l:"Comp", t:"Pipeline Math", d:"$50K ACV × 3-yr term sales motion. CAC ceiling tied to 3-month payback. Rescheduling-window urgency built into the close framing.", delivs:["Ramp plan · 30/60/90","Displacement vs new-LOB segmentation","Board-defendable cohort math","Pilot SAL floor"] },
    { l:"Onboarding", t:"Operator Cadence", d:"Monday signal review with Richard. Wednesday reply triage. Friday pipeline review with Buster. Bi-weekly deal-level coaching.", delivs:["Monday signal review","Wednesday reply triage","Friday pipeline review","Bi-weekly deal coaching"] },
  ];
  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 gold-standard product. What you need next is coverage of the third you don&rsquo;t have, displacement ammo for the third you compete on, and a system in place before federal rescheduling resets the field. Strategy, playbooks, pipeline math, 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</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">SAR data, ICP, 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">Salesforce, agents, 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 = {
  shield: {
    label: "Shield Compliance (Cannabis Banking · Sample)",
    sub: "Community banks · Credit unions · BSA / CCO / Risk · Sample projection",
    sample: true,
    summary: "Sample · projected pilot trajectory across the three Shield cohorts.",
    summaryBody: "Sample · projected 60-day pilot trajectory. Three-cohort sequencing across (1) displacement targets currently using competitor software, (2) the no-software third of the cannabis-banking pool, and (3) the broader ~700 SAR-filing institutions where rescheduling resets the buying intent. AICRO Connect&rsquo;s accept rate holds in the mid-40s on BSA / Risk / Compliance personas. Of the projected 11 booked meetings, 4 land as active opportunities tied to the displacement cohort and 5 to the SAR-filer cohort responding to rescheduling-driven board asks.",
    kpis: { sent:"3,840", positives:"24", meetings:"11", pipeline:"$420K", 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: "160:1",
    campaigns: [
      { type:"em", name:"EM | Displacement · CRO/CCO · Competitor cohort", sent:"1,420", contacted:"930", connReq:"-", connAcc:"-", positives:"8", posRate:"28.0%", accept:"-" },
      { type:"li", name:"LI | BSA Officer · First-time SAR filers (12mo)", sent:"248", contacted:"212", connReq:"212", connAcc:"104", positives:"7", posRate:"54.0%", accept:"49.1%", active:true },
      { type:"em", name:"EM | No-software third · President/CEO · Community banks", sent:"1,120", contacted:"712", connReq:"-", connAcc:"-", positives:"5", posRate:"22.4%", accept:"-" },
      { type:"li", name:"LI | Adjacent verticals · Hemp / CBD / MSB / Gaming", sent:"176", contacted:"138", connReq:"138", connAcc:"58", positives:"3", posRate:"41.6%", accept:"42.0%" },
      { type:"em", name:"EM | Rescheduling watch · Top 200 SAR filers", sent:"876", contacted:"540", connReq:"-", connAcc:"-", positives:"1", posRate:"15.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | BSA Officer · First-time SAR filers (12mo)",
      replies: 13, posPct: 53.8, neuPct: 46.2,
      funnel: [
        { stage:"Connection Requests", val:248, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:212, w:86, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"85.5%" },
        { stage:"Accepted", val:104, w:42, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"49.1%" },
        { stage:"Replied", val:13, w:18, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"12.5%" },
        { stage:"Positive", val:7, w:12, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"53.8%" },
        { stage:"Meetings", val:3, w:6, color:"#0E9F66", pct:"42.9%" },
        { stage:"Pipeline $", val:1, w:4, color:"#0E9F66", pct:"$150K" },
        { stage:"Revenue", val:0, w:1, color:"#CBD5E1", pct:"Pilot" },
      ],
      recent: [
        { name:"Community Bank TX · BSA Officer", date:"Jun 24", tag:"Meeting Booked", booked:true },
        { name:"Credit Union OK · Chief Risk Officer", date:"Jun 23", tag:"Interested" },
        { name:"Community Bank IN · CCO", date:"Jun 22", tag:"Interested" },
        { name:"Mid-tier Bank NC · Head of Compliance", date:"Jun 21", tag:"Meeting Booked", booked:true },
        { name:"Community Bank KY · President", date:"Jun 20", tag:"Interested" },
        { name:"Credit Union GA · BSA Specialist", date:"Jun 19", tag:"Interested" },
        { name:"Mid-tier Bank NE · COO", 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 (Gumption)",
    sub: "CRE Debt Marketplace · Growth",
    summary: "Senior brokers replying within the hour.",
    summaryBody: "Real production data, anonymized. 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&rsquo;s accept rate held at 47%; the funnel narrowed at meeting-set, which is a battlecard issue we&rsquo;re fixing this week. This is the same operating pattern we&rsquo;re proposing for Shield, in a different vertical.",
    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" },
      ],
    },
  },
};

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

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>
  );
}

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:9, em:67, li:33, x:"Mar 30" },
                  { tot:14, em:42, li:58, x:"Apr 6" },
                  { tot:18, em:38, li:62, 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*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={[2,3,4,5,7,9,11,14]} 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 / Math.max(1, 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>
  );
}

function ClientPortalScreenshots() {
  const shots = [
    {
      src: "uploads/pasted-1777222339189-0.png",
      label: "Executive Summary",
      caption: "Last 30 days, three-cohort view across displacement, no-software third, and SAR-filer pool. Email and LinkedIn side by side, weekly positive replies, every campaign with full funnel. The view Richard 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%+ positive rate on the LinkedIn close-deal lookalike cohort is real AICRO client production 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 in Shield&rsquo;s resource-share voice. Approved by the operator before send. Real reply, name redacted.",
    },
    {
      src: "uploads/pasted-1777222220819-0.png",
      label: "Sales Action · AICRO Rounds",
      caption: "Stalled opportunity, 22 days since last touch. AICRO Rounds grades it Grade A, recommends Buster, and writes the script. Account and contact redacted.",
    },
  ];
  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 production 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>
  );
}

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: BSA Officer + CRO + community-bank President meetings booked, anchored to the displacement, no-software, and SAR-filer cohorts. 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 cannabis-fluent SDR + manager oversight + tool stack for 9 to 12 months.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">1 SDR (loaded)</span><span className="val">$120 to $160K</span></div>
              <div className="cost-list-row"><span className="label">Manager oversight</span><span className="val">$80 to $110K</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 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">$230 to $320K</span></div>
            </div>
            <div className="cost-meta">Plus 9 to 12 months of stalled pipeline before you know if the build works. Federal rescheduling resets the field before the SDR ramps.</div>
          </div>
          <div className="cost-card aicro">
            <div className="cost-eyebrow">AICRO · Shield Compliance pilot</div>
            <h3>$10,000 / month. 2-month pilot. $20,000 total.</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. Calibrated to Shield&rsquo;s cash flow without sacrificing the build.</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">3 SALs / month or terminate</span></div>
              <div className="cost-list-row total"><span className="label">One bill</span><span className="val">Shield 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 3 Sales Accepted Leads, Shield can terminate with 10 days&rsquo; notice, owing only that month. Discount for full upfront payment.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CaseStudies() {
  const cases = [
    {
      co: "Gumption",
      stage: "Growth",
      sector: "CRE Debt Marketplace · The strategic partner who referred Shield",
      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: "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" },
      ],
    },
  ];
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">08 / Proof</span>
          <h2>Three engagements. Gumption referred you here.</h2>
          <p>Live metrics still pulsing in the AICRO data layer where engagements are active. Gumption sits first because they made the introduction.</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" dangerouslySetInnerHTML={{__html: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>
  );
}

function NinetyDay() {
  const workstreams = [
    {
      name: "AICRO Send · Email Engine",
      desc: "75 warmed inboxes · subject-line scrubber discipline · main domain untouched",
      bars: [
        { left: 0, width: 25, label: "DOMAIN WARM-UP", cls: "amber" },
        { left: 25, width: 75, label: "LIVE SEQUENCES + DAILY OPTIMIZATION", cls: "sky" },
      ],
      delivs: [
        { left: 18, label: "Day 14 · warm" },
        { left: 28, label: "Day 21 · live" },
        { left: 65, label: "Day 45 · 25%+" },
      ],
    },
    {
      name: "AICRO Connect · LinkedIn Engine",
      desc: "Multi-seat across the 6 LinkedIn profiles Shield already has · BSA / Risk / Compliance personas",
      bars: [
        { left: 0, width: 12, label: "PROFILE SETUP", cls: "amber" },
        { left: 12, width: 88, label: "MULTI-SEAT CONNECT + INMAIL CAMPAIGNS", cls: "sky" },
      ],
      delivs: [
        { left: 8, label: "Day 7 · connected" },
        { left: 28, label: "Day 21 · campaign" },
        { left: 65, label: "Day 45 · 45%+" },
      ],
    },
    {
      name: "Hyper-Personalization Layer",
      desc: "Per-account hook on every send · resource-share voice · operator-approved",
      bars: [
        { left: 0, width: 20, label: "TEMPLATE LIBRARY", cls: "amber" },
        { left: 20, width: 50, label: "A/B TEST + REFINE", cls: "sky" },
        { left: 70, width: 30, label: "ICP-TUNED HOOKS", cls: "mint" },
      ],
      delivs: [
        { left: 18, label: "Day 14 · templates" },
        { left: 42, label: "Day 30 · A/B test" },
        { left: 70, label: "Day 50 · 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: 18, label: "Day 12 · pipeline" },
        { left: 50, label: "Day 30 · comp" },
        { left: 88, label: "Day 60 · QBR" },
      ],
    },
  ];
  return (
    <section className="section section-soft" id="timeline">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">09 / The 60-day build</span>
          <h2>Day 1 to Day 60, in deliverables you can hold.</h2>
          <p>Day 1 starts on signed contract + funds received. The Setup Period hardens 75 domains and aligns the three-cohort ICP. The Pilot Period ships first sequences by Day 14 and first booked 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 14<span className="day">First sequences</span></div>
            <div className="col">Day 30<span className="day">First meetings</span></div>
            <div className="col">Day 45<span className="day">Compounding</span></div>
            <div className="col">Day 60<span className="day">Decision point</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>
  );
}

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"}}>Category leaders work with category leaders.</h2>
            <p style={{maxWidth:760}}>
              Sales slowed &mdash; exactly when a category leader should invest. Capital is tight &mdash; exactly when timing matters most. A weaker competitor is reaching peer-group prospects before you. Doing nothing this quarter cedes the rescheduling window to them.
            </p>
            <p style={{maxWidth:760, marginTop:14}}>
              The 2-month pilot is calibrated for that triangle. <strong style={{color:"#fff"}}>$20,000 total. 3-SAL floor in Month 2 or Shield walks owing only that month.</strong> The smallest bet you can make. The largest bet that competitor is making against you.
            </p>
            <p style={{maxWidth:760, marginTop:14}}>
              Gumption referred us. We built the same operating system for them and for two other category leaders in regulated verticals. We&rsquo;d like to do the same work for the gold standard in cannabis banking.
            </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: SHIELD COMPLIANCE
            </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 · SHIELD COMPLIANCE</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>
  );
}

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}/>
      <BuyerTruth/>
      <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:"shield", label:"Shield Compliance (Cannabis Banking · sample)"},
            {value:"saas", label:"B2B SaaS"},
            {value:"cre", label:"CRE Tech (Gumption pattern)"},
          ]}
          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/>);