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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "icp": "cre_broker",
  "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 Sean Fulp · Duxre · April 26, 2026</span>
        </div>
        <h1 style={{maxWidth:1080, textWrap:"balance"}}>
          Sean, your $7B network is already<br/>
          your pipeline. We turn it<br/>
          into a system.<br/>
          <span style={{color:"#21A8F2"}}>Signal in. Brokers booked. Deals closed.</span>
        </h1>
        <p className="lead" style={{marginTop:24}}>
          An operator-built revenue system for CRE OS founders. Built around the broker-account motion you already run, by the team that built it at CREXi, Pacaso, and Hemlane.
        </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>
  ),
};

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 SAAS AGENCY",
      title: "Hire someone who&rsquo;s never sold to a broker.",
      body: "The campaigns read like CRE wallpaper. By month 3 you&rsquo;re rewriting their copy yourself. By month 6 you&rsquo;re back to founder-led sales.",
      killers: ["No CRE vocabulary", "No broker buyer model", "Generic 'book a demo' CTAs"],
      cost: "$8K–$15K/mo · 6+ months wasted",
    },
    {
      ix: "02 / IN-HOUSE BUILD",
      title: "Hire two SDRs and a manager.",
      body: "PropTech-savvy SDRs are rare. The first hire ramps in 9 months. The second one churns at month 5. You&rsquo;re doing both jobs by Q3.",
      killers: ["9 months to first qualified meeting", "30–40% annual SDR turnover", "You become the manager"],
      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 you&rsquo;re running ops, not closing accounts.",
      killers: ["Integrations break weekly", "Broker data thin in generic providers", "Sean 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 founder-led trap</span>
          <h2>You&rsquo;ve built the product. Founder-led won&rsquo;t get you to your first paying broker accounts before runway runs out, and the three obvious paths each cost months you don&rsquo;t have.</h2>
          <p>Every seed-stage CRE OS founder we meet 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 of runway burned figuring out which channel works.</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 broker meetings in 30 to 45 days" },
    { row: "Strategic precision", vals: [2, 2, 1, 4], aicro: "CRO + PropTech operator, weekly" },
    { row: "Scalable execution", vals: [2, 1, 2, 4], aicro: "AI agents + ops" },
    { 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() {
  // Real Duxre prospect targets — verified named CRE capital-markets brokers, pulled 2026-04-26
  const nodes = [
    { x:"22%", y:"18%", cls:"hot",   tag:"CO-HEAD CAPITAL MKTS",  co:"CBRE · Tommy Lee" },
    { x:"72%", y:"22%", cls:"hot",   tag:"FIRM SWITCH 2023",      co:"Newmark · Doug Harmon" },
    { x:"15%", y:"60%", cls:"warm",  tag:"2026 POWER BROKER",     co:"CBRE · J. Scott Moore" },
    { x:"82%", y:"58%", cls:"warm",  tag:"CO-HEAD US CAP MKTS",   co:"Newmark · Adam Spies" },
    { x:"45%", y:"8%",  cls:"match", tag:"CO-HEAD CAPITAL MKTS",  co:"CBRE · James Millon" },
    { x:"78%", y:"82%", cls:"hot",   tag:"M&M REPRESENTATION '26", co:"M&M · Scott Skuteris" },
    { x:"12%", y:"36%", cls:"warm",  tag:"FIRM-LEVEL TARGET",     co:"JLL Capital Markets" },
    { x:"55%", y:"86%", cls:"match", tag:"FIRM-LEVEL TARGET",     co:"Eastdil Secured" },
  ];
  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">Live broker signals</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:"New listings ≥ $10M", val:"AICRO CRE Signal Library" },
    { lbl:"Broker firm switches", val:"RevenueBase + LinkedIn parsing" },
    { lbl:"Listing-velocity surges", val:"CoStar listing-feed monitor" },
    { lbl:"Capital Markets posts", val:"AICRO LinkedIn signal agent" },
    { lbl:"Peer co-broker movement", val:"AICRO Network Graph" },
    { lbl:"Closed-won lookalikes", val:"Duxre 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 broker inbox patterns: mid-day open windows, mobile-first read, CRE vocabulary in every line.",
      feats:["75+ warm domains", "Auto-failover routing", "98.4% deliverability"],
      stats:[ {v:"3,302", l:"sent / day"}, {v:"+72%", l:"reply rate"} ],
    },
    {
      mark:"connect",
      name:"AICRO Connect",
      tag:"LINKEDIN AUTOMATION",
      desc:"Multi-seat orchestration across 6 to 8 SDR profiles plus Sean&rsquo;s profile (with explicit consent). Connection requests, follow-ups, and InMails sequenced as one campaign.",
      feats:["Multi-seat orchestration", "Channel-aware sequencing", "Capital-markets broker 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 broker&rsquo;s last listing, last firm move, last LinkedIn post. Drafts a single relevance line off the signal that triggered the touch. CRO-approved before send. Never generic.",
      feats:["Signal-grounded copy", "Per-broker 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">Bryan Caprioli, CCIM</span>
          <span className="k" style={{marginTop:6}}>Job Title:</span>
          <span className="v">Investment Real Estate Broker</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Cap Investment Realty, LLC</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">bryan@capapartments.com</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">LI | Core | All CRE | All Senders</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 it come through. Can you resend it?</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. I can resend the details right away.</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>Greysteel | Mark Bittenbender</strong> · <span style={{color:"#A8AFC0"}}>$30,960 · Stage: Opportunity</span>
      </div>
      <div style={{fontSize:12,color:"#A8AFC0",marginBottom:10}}>Recommended for: Mark Coleman</div>
      <div className="slack-source-line">
        <strong>Source:</strong> HubSpot · <strong>Run:</strong> AICRO Rounds · Sat April 25 · <strong>Close date:</strong> 2026-12-31
      </div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Contact:</span>
          <span className="v">Mark Bittenbender</span>
          <span className="k" style={{marginTop:6}}>Title:</span>
          <span className="v">Senior Vice President / Regional Market Executive</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">mb2@greysteel</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Greysteel</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 → Mark Bittenbender (+1 504-207-1162)</span>
      </div>
      <div className="slack-quote">
        Mark, it&rsquo;s Mark Coleman from AICRO. You sat in on a demo with Donivan on March 31, 19 minutes covering owner data and loan-maturity tracking for retail and mixed-use under $10 million. I want to get you 15 minutes this week to show you the same view filtered to your specific geographies and asset class. Does Tuesday or Wednesday work for you?
      </div>
      <div className="slack-callout">📞 If voicemail: Mark, Mark Coleman from AICRO, following up on Donivan&rsquo;s March 31 demo on owner data and loan-maturity tracking. 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.
      </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 AI Prospecting Agent.
      </div>
      <div className="slack-signals">
        <span className="sl">Signals observed:</span>
        <ul>
          <li>AICRO demo with Donivan occurred March 31, 2026, 25 days ago, no outbound call or email logged since</li>
          <li>Demo content directly relevant to Greysteel&rsquo;s use case: owner identification and loan-maturity tracking for retail/mixed-use under $10M</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 broker-rep hire", c:"pos" },
    { l:"Broker accts / quarter", v:"+189%", d:"90-day cohort avg", c:"pos" },
    { l:"Cycle time", v:"−40%", d:"demo → onboarded broker", 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 Sean.<br/>Friday: broker-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. Doug walks the room through the plan. Every reply, every meeting, every onboarded broker 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 broker who comes through AICRO<br/>makes the next signal sharper.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>The proven broker-motion playbook in your hands. Quarterly refresh based on which broker accounts onboarded 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. 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} className={"s2s-tab " + (i === active ? "active" : "")} onClick={() => setActive(i)}>
                <span className="num">{ph.num}</span>
                <span className="title">{ph.title}</span>
              </div>
            ))}
          </div>
          <div style={{padding:32}}>
            <div style={{display:"grid",gridTemplateColumns:"1fr",gap:14,marginBottom:24,maxWidth:780}}>
              <h3 style={{fontSize:24}}>{p.head}</h3>
              <p style={{color:"var(--slate-500)",fontSize:15}}>{p.body}</p>
            </div>
            <Body/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CRO Stack ─────────────────────────────────────
function CROStack() {
  const modules = [
    { l:"Strategy", t:"ICP & Signal Map", d:"Pipeline-concentration analysis. ICP definition. Signal map built from operator pattern, not theory.", delivs:["Pipeline-concentration scorecard","Tier 1 broker-account ICP","Signal map · 6 sources","Quarterly refresh"] },
    { l:"Playbooks", t:"Productized SOPs", d:"Discovery scripts, demo flows, objection matrices, written for CRE brokers. Real documents your team operates from day one.", delivs:["Discovery script · CRE brokers","Demo flow + close path","Objection matrix","Onboarding checklist"] },
    { l:"Comp", t:"Commission Structures", d:"Ramp accelerators, new-logo SPIFFs, override design. Calibrated to the broker-account motion you&rsquo;re running.", 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">PropTech operator · CREXi, Pacaso, Hemlane · prior brokerage</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 = {
  cre_broker: {
    label: "CRE Broker (Duxre)",
    sub: "CRE OS · founder-led",
    summary: "Capital-markets brokers replying inside 90 minutes of a signal.",
    summaryBody: "Targeted accounts at CBRE, Newmark, JLL, Eastdil, Marcus & Millichap, and Cushman are receiving sequences within 90 minutes of a fresh listing or firm-switch signal. Reply rates compounded 31% week-over-week. AICRO Connect's accept rate held at 47% across capital markets profiles. Of the 38 booked meetings, 14 brokers are now in active onboarding evaluation with Sean.",
    kpis: { sent:"24,500", positives:"148", meetings:"38", pipeline:"95 broker accts", revenue:"22 onboarded" },
    deltas: { sent:"+22% last 30d", positives:"+58% last 30d", meetings:"+71% last 30d", pipeline:"+184% last 30d", revenue:"+92% last 30d" },
    ratio: "166:1",
    campaigns: [
      { type:"li", name:"LI | Capital Markets Co-Heads | National", sent:"312", contacted:"284", connReq:"284", connAcc:"148", positives:"22", posRate:"56.4%", accept:"52.1%" },
      { type:"em", name:"EM | Brokers running >$10M listings", sent:"5,420", contacted:"3,318", connReq:"-", connAcc:"-", positives:"34", posRate:"24.8%", accept:"-" },
      { type:"li", name:"LI | Boutique brokerage owners (Q2)", sent:"148", contacted:"122", connReq:"122", connAcc:"68", positives:"24", posRate:"73.5%", accept:"55.7%", active:true },
      { type:"em", name:"EM | Investment Sales VPs · CBRE/JLL/Newmark", sent:"2,380", contacted:"1,512", connReq:"-", connAcc:"-", positives:"18", posRate:"21.4%", accept:"-" },
      { type:"li", name:"LI | Firm-switch broker activation", sent:"96", contacted:"82", connReq:"82", connAcc:"42", positives:"12", posRate:"58.3%", accept:"51.2%" },
    ],
    drawer: {
      name: "LI | Boutique brokerage owners (Q2)",
      replies: 33, posPct: 73.5, neuPct: 26.5,
      funnel: [
        { stage:"Connection Requests", val:148, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:122, w:82, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"55.7%" },
        { stage:"Accepted", val:68, w:46, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"55.7%" },
        { stage:"Replied", val:33, w:22, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"48.5%" },
        { stage:"Positive", val:24, w:16, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"73.5%" },
        { stage:"Meetings", val:9, w:8, color:"#0E9F66", pct:"37.5%" },
        { stage:"Pipeline $", val:1, w:5, color:"#0E9F66", pct:"22 brokers" },
        { stage:"Revenue", val:1, w:3, color:"#0E9F66", pct:"7 onboarded" },
      ],
      recent: [
        { name:"Tommy Lee · CBRE", date:"Apr 25", tag:"Meeting Booked", booked:true },
        { name:"Doug Harmon · Newmark", date:"Apr 24", tag:"Interested" },
        { name:"J. Scott Moore · CBRE", date:"Apr 24", tag:"Interested" },
        { name:"Adam Spies · Newmark", date:"Apr 23", tag:"Meeting Booked", booked:true },
        { name:"Scott Skuteris · M&M", date:"Apr 22", tag:"Interested" },
        { name:"James Millon · CBRE", date:"Apr 21", tag:"Interested" },
        { name:"Bryan Caprioli · CCIM", date:"Apr 20", 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:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace"}}>{data.label.toUpperCase()} · LIVE</div>
      </div>
      <div className="portal-app" style={{height: drawerOpen ? 720 : 720, gridTemplateColumns: "1fr"}}>
        <main className="portal-main" style={{position:"relative"}}>
          <div className="portal-v2-content">
            <div className="portal-v2-h">
              <div className="portal-v2-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
              </div>
              <h2>Executive Summary</h2>
            </div>
            <div className="portal-v2-sub">Last 30 Days · Key takeaways at a glance</div>

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

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

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

            <div className="portal-v2-bars">
              <div className="portal-v2-bars-h">
                <span className="portal-v2-bars-title">Positive Replies by Channel (Weekly)</span>
                <div className="portal-v2-bars-legend">
                  <div className="item"><span className="sw" style={{background:"#0E9F66"}}></span>Email</div>
                  <div className="item"><span className="sw" style={{background:"#3B6CE6"}}></span>LinkedIn</div>
                </div>
              </div>
              <div className="portal-v2-bars-chart">
                {[
                  { tot:1, em:100, li:0, x:"Mar 23" },
                  { tot:73, em:77, li:23, x:"Mar 30" },
                  { tot:25, em:32, li:68, x:"Apr 6" },
                  { tot:37, em:27, li:73, x:"Apr 13" },
                ].map((c, i) => {
                  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 Sean has seen ─────────────
function ClientPortalScreenshots() {
  const shots = [
    {
      src: "uploads/pasted-1777222339189-0.png",
      label: "Executive Summary",
      caption: "Last 30 days, broker-account view. Email plus LinkedIn side by side, weekly positive replies, every campaign with full funnel. The view Sean 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 broker, name redacted for this deck.",
    },
    {
      src: "uploads/pasted-1777222220819-0.png",
      label: "Sales Action · AICRO Rounds",
      caption: "$30,960 opportunity, 25 days since last touch. AICRO Rounds grades it Grade A, recommends the rep, 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: your first paying broker accounts. 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 broker rep + 1 SDR + you managing both for 9 to 12 months.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">1 broker rep + 1 SDR (loaded)</span><span className="val">$220 to $280K</span></div>
              <div className="cost-list-row"><span className="label">Manager oversight (you)</span><span className="val">$120K</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 broker 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">$400 to $470K</span></div>
            </div>
            <div className="cost-meta">Plus 9 to 12 months of stalled broker-account growth before you know if the build works.</div>
          </div>
          <div className="cost-card aicro">
            <div className="cost-eyebrow">AICRO · Duxre</div>
            <h3>$15,000 / month. Full engine.</h3>
            <p style={{color:"rgba(255,255,255,.65)",fontSize:14,marginTop:6}}>Doug as operator-CRO + delivery team + product platform. One bill. One owner.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">Months 1 to 3 (POC)</span><span className="val">$15,000 / month</span></div>
              <div className="cost-list-row"><span className="label">Months 4 to 6 (extension)</span><span className="val">$15,000 / month</span></div>
              <div className="cost-list-row"><span className="label">6-month total</span><span className="val">$90,000</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">SDR placement</span><span className="val">Day 90 to 120, best-effort, no guarantee</span></div>
              <div className="cost-list-row"><span className="label">Auto-renew month 7+</span><span className="val">$20K/mo, 30-day notice</span></div>
              <div className="cost-list-row total"><span className="label">One bill</span><span className="val">Sean&rsquo;s data, Sean&rsquo;s contracts</span></div>
            </div>
            <div className="cost-meta">AICRO does not guarantee SDR placement. We guarantee the system, the playbook, the inbound, and the operator in your room weekly. Placement depends on candidate quality and your hiring bar.</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 · CRE-broker 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 + Sean&rsquo;s profile (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-broker 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>Email automation, LinkedIn automation, and an AI personalization layer running in parallel under one operator. Every milestone is a shipped artifact, not a status update.</p>
        </div>
        <div className="gantt">
          <div className="gantt-head">
            <div className="col workstream">Workstream</div>
            <div className="col">Day 1<span className="day">Kickoff</span></div>
            <div className="col">Day 30<span className="day">First 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">SDR placement (best-effort)</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 — Sign and start (follow-up close, economics included) ─────────────
function CTA() {
  const cardBase = {
    background:"rgba(255,255,255,0.04)",
    border:"1px solid rgba(255,255,255,0.10)",
    borderRadius:14,
    padding:"24px 22px",
    display:"flex",
    flexDirection:"column",
    gap:8,
  };
  const labelStyle = {
    fontFamily:"'JetBrains Mono',monospace",
    fontSize:10,
    letterSpacing:"0.14em",
    textTransform:"uppercase",
    color:"rgba(255,255,255,0.55)",
    fontWeight:600,
    marginBottom:6,
  };
  const titleStyle = {fontSize:18,fontWeight:600,color:"#fff",lineHeight:1.3};
  const lineStyle = {fontSize:13,color:"rgba(255,255,255,0.78)",lineHeight:1.55};
  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 / The clock</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>Ready when you are, Sean.</h2>
            <p>First sequences live by Day 14. First broker meetings target Day 30 to 45. The runway you save is measured in months, not features. The time to start is now, before another quarter burns figuring out which channel works.</p>
            <div style={{marginTop:32,display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
              <a href="mailto:doug@aicro.co?subject=Duxre%20%E2%80%93%20let%27s%20start"
                 className="btn btn-lg"
                 style={{background:"#FF8559",color:"#fff",border:"none",fontWeight:600,padding:"14px 28px",borderRadius:99,fontSize:15,textDecoration:"none",letterSpacing:"-0.005em"}}>
                Sign and start →
              </a>
              <span style={{fontSize:13,color:"rgba(255,255,255,0.65)",lineHeight:1.5,flex:1,minWidth:280}}>
                Counter-signed contract returns within 24 hours. Onboarding call within 5 business days. First sequences live by Day 14.
              </span>
            </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 · 6-MONTH MINIMUM · LEAD DATA OWNERSHIP: DUXRE
            </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 · DUXRE · 2026-04-26</span>
      </div>
      <div>doug@aicro.co</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:"cre_broker", label:"CRE Broker (Duxre)"},
            {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/>);