// AICRO · Overview - main app
const { useState, useEffect, useRef, useMemo, Fragment } = React;

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

// ─── Logomark ─────────────────────────────────────
function Logomark({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" style={{display:"inline-block"}}>
      <rect width="32" height="32" rx="7" fill="#21A8F2"/>
      <text x="16" y="22" textAnchor="middle" fontFamily="Montserrat, Inter, sans-serif" fontWeight="800" fontSize="18" fill="#fff" letterSpacing="-0.5">A</text>
    </svg>
  );
}

// ─── Nav ─────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="nav-left">
          <a href="#" className="nav-logo">
            <span className="nav-logo-text">AICRO</span>
            <span className="nav-tag">Overview</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">The shift</a>
            <a href="#system">How it works</a>
            <a href="#position">Why we&rsquo;re different</a>
            <a href="#cases">Proof</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#cta" className="btn btn-primary btn-sm">Book a 15-min walkthrough</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>AICRO &middot; Signal-led outbound for B2B PropTech</span>
        </div>
        <h1 style={{maxWidth:1040, textWrap:"balance"}}>
          Net-new pipeline for B2B PropTech.<br/>
          <span style={{color:"#21A8F2"}}>Built on signal. Run by operators.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:860}}>
          The outbound engine for PropTech and real-estate-tech. We fire only on real buying signals, write every line operator-to-operator, and hand booked meetings to your team.
        </p>
        <div className="hero-cta-row">
          <a href="#system" className="btn btn-primary btn-lg">See how it works &rarr;</a>
          <a href="#position" className={dark ? "btn btn-outline-light btn-lg" : "btn btn-ghost btn-lg"}>Why we&rsquo;re different</a>
        </div>
        <div style={{marginTop:36,paddingTop:24,borderTop:"1px solid rgba(255,255,255,0.10)",display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:24,maxWidth:920}}>
          {[
            {v:"47%", l:"LinkedIn PRR · RemoteLock"},
            {v:"$75M+", l:"qualified pipeline · Gumption"},
            {v:"Series B", l:"secured · Capitalize"},
            {v:"15+ yrs", l:"PropTech operator at CRO level"},
          ].map((s,i) => (
            <div key={i}>
              <div style={{fontSize:22,fontWeight:600,letterSpacing:"-0.01em",color:dark ? "#fff" : "var(--shark)"}}>{s.v}</div>
              <div style={{fontSize:11,color:dark ? "rgba(255,255,255,0.55)" : "var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase",marginTop:4,lineHeight:1.4}}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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

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

// ─── Section 1: PropTech Market ────────────────────────
function PropTechMarket() {
  const drivers = [
    {
      tag: "01 · INBOX SATURATION",
      stat: "15+",
      statLbl: "cold emails per decision-maker, daily",
      title: "Buyers went pattern-blind.",
      body: "Decision-makers now get 15 or more cold emails a day, most of them templated AI outreach that reads identical. Buyers have developed pattern blindness: the standard AI template gets archived on sight, no matter how &lsquo;personalized&rsquo; the merge fields claim to be.",
      source: "Source: 2026 cold-email benchmark aggregates",
    },
    {
      tag: "02 · THE AI PENALTY",
      stat: "8%",
      statLbl: "AI emails spam-flagged vs 3% human",
      title: "Generic AI underperforms a human.",
      body: "AI-generated cold emails reply at 4.1% against 5.2% for human-written, and get spam-flagged at 8% versus 3%. The tools everyone bought to scale are quietly landing in spam and underperforming the rep they replaced.",
      source: "Source: 100K-email AI-SDR performance analysis, 2026",
    },
    {
      tag: "03 · SIGNAL BEATS VOLUME",
      stat: "15-25%",
      statLbl: "reply rate · signal-led / personalized",
      title: "Relevance is the only lever left.",
      body: "Text-template tools reply at 1 to 3%. Signal-led, deeply personalized outreach replies at 15 to 25%, a 5 to 8x lift. The gap is no longer AI versus no-AI. It is relevance versus noise, and only relevance still earns a reply.",
      source: "Source: 2026 outreach benchmark, personalization tiers",
    },
    {
      tag: "04 · REAL ESTATE ADOPTS SLOW",
      stat: "Slowest",
      statLbl: "adoption curve of any B2B vertical",
      title: "These buyers punish lazy outreach hardest.",
      body: "Real estate operators are skeptical, relationship-driven, and slow to adopt. Generic automation gets ignored faster here than in any other vertical. Operator-to-operator relevance, spoken in their stack, is the only thing that earns the first reply.",
      source: "Source: AICRO · active PropTech book",
    },
  ];
  return (
    <section className="section" id="thesis">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>01 / The shift</span>
          <h2>Every PropTech is sending the same email to the same buyer.</h2>
          <p>The category bought one AI-SDR tool and pointed it at the same slow-moving operators. Here is what that did to top-of-funnel, and where AICRO sits against it.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          {drivers.map((d,i) => (
            <div key={i} className="card" style={{padding:28,display:"flex",flexDirection:"column",gap:14}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:600}}>{d.tag}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:14,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:42,fontWeight:600,letterSpacing:"-0.02em",color:"var(--shark)",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <h3 style={{fontSize:20,lineHeight:1.3,color:"var(--shark)",margin:0}}>{d.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}} dangerouslySetInnerHTML={{__html: d.body}}></p>
              <div style={{fontSize:10,color:"var(--slate-400)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em",marginTop:"auto"}}>{d.source}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:32,padding:"24px 28px",background:"var(--shark)",borderRadius:14,color:"#fff"}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600,marginBottom:12}}>Where AICRO sits</div>
          <div style={{fontSize:18,lineHeight:1.5,color:"#fff",fontWeight:500,maxWidth:940}}>
            Every PropTech is aiming the same AI-SDR tool at the same slow-moving buyers. Reply rates are cratering, inboxes full of &ldquo;AI personalization&rdquo; no one answers. We run the opposite. Fire only when a real buying signal hits. Every line reads operator-to-operator, not vendor pitch. Same AI, opposite result. Distribution, not another tool.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Phase 1 - Detect (cleaner signal map) ─────────────
function SignalMapVisual() {
  const nodes = [
    { x:"50%", y:"14%", cls:"hot",   tag:"LEASING AGENT JOB POST",      co:"Regional flex operator · 9 sites" },
    { x:"22%", y:"36%", cls:"hot",   tag:"NEW SITE ANNOUNCED",          co:"Coworking brand · multi-market" },
    { x:"78%", y:"36%", cls:"warm",  tag:"REVIEW · MISSED INQUIRY",     co:"Self-storage operator · 30 facilities" },
    { x:"22%", y:"66%", cls:"warm",  tag:"FRONT-DESK HIRING SURGE",     co:"Senior living group · 12 communities" },
    { x:"78%", y:"66%", cls:"match", tag:"NO LEAD-ROUTING DETECTED",    co:"MH community operator · 400+ pads" },
    { x:"50%", y:"86%", cls:"hot",   tag:"EXPANSION FUNDING",           co:"Flex office operator · Series A" },
  ];
  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 operator signals</span>
        <span className="v">142</span>
        <span className="s">&#8593; 18 new this week</span>
      </div>
      {nodes.map((n,i) => (
        <div key={i} className={"signal-node " + n.cls} style={{left:n.x, top:n.y}}>
          <span className="ndot"></span>
          <div className="nbody">
            <span className="ntag">{n.tag}</span>
            <span className="nco">{n.co}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function PhaseDetect() {
  const sources = [
    { lbl:"Job postings · leasing / front desk", val:"Manual lead-handling pain in the JD" },
    { lbl:"New-site + expansion announcements",  val:"Operator scaling past manual capacity" },
    { lbl:"Public reviews · missed inquiries",   val:"Slow-response signal, named operator" },
    { lbl:"Tech-stack detection",                val:"Basic CRM or no lead-routing layer" },
    { lbl:"Funding + growth events",             val:"Operator firms raising or expanding" },
    { lbl:"Association + conference rosters",     val:"GCUC, SSA, NIC, coworking + storage" },
  ];
  return (
    <div>
      <SignalMapVisual/>
      <div className="signal-sources">
        {sources.map((s,i) => (
          <div key={i} className="signal-source-card">
            <span className="lbl">{s.lbl}</span>
            <span className="val">{s.val}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Phase 2 - Outreach ─────────────
function PhaseOutreach() {
  const products = [
    {
      mark:"send",
      name:"AICRO Send",
      tag:"EMAIL OUTBOUND PLATFORM",
      desc:"75+ warmed sender domains, calibrated for operator inbox patterns. Operator-to-operator language in every line, not vendor pitch. The signal that triggered the touch is the opener.",
      feats:["75+ warm domains", "Auto-failover routing", "98.4% deliverability"],
      stats:[ {v:"3,302", l:"sent / day"}, {v:"+72%", l:"reply rate"} ],
    },
    {
      mark:"connect",
      name:"AICRO Connect",
      tag:"LINKEDIN AUTOMATION",
      desc:"Multi-seat orchestration across 6 to 8 SDR profiles. Title-tier-aware: founders and VPs of Revenue get the A track; site managers get the C track. Proven 47% LinkedIn PRR to RE operators.",
      feats:["Multi-seat orchestration", "Title-tier sequencing", "Operator vocabulary"],
      stats:[ {v:"47%", l:"accept rate"}, {v:"54%", l:"positive rate"} ],
    },
    {
      mark:"agent",
      name:"AICRO Outreach Agent",
      tag:"HYPER-PERSONALIZATION LAYER",
      desc:"Reads each operator&rsquo;s role, recent activity, and the signal that triggered the touch (a leasing-agent job post, a new site, a review). Writes the relevance line. CRO-approved before send.",
      feats:["Signal-grounded copy", "Per-operator 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" dangerouslySetInnerHTML={{__html: 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">&#10003; 1</span>
            <span className="slack-emoji">&#128064; 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> &#128279; LinkedIn &nbsp;|&nbsp; <strong>Routed to:</strong> your AE</div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Name:</span>
          <span className="v">Dana Reichert</span>
          <span className="k" style={{marginTop:6}}>Job Title:</span>
          <span className="v">VP Revenue</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Regional flex operator · 9 locations</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">dana@flexspaces.example</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">LI | New-site signal | Coworking VP Revenue</span>
        </div>
      </div>
      <div className="slack-pill"><span className="pdot"></span>Posted 3 leasing-coordinator roles in 30 days</div>
      <div className="slack-block">
        <span className="lbl">Last Reply:</span>
        <span className="val">We just opened our 9th location and tour requests pile up overnight. Half don&rsquo;t get a reply until the next afternoon. How fast could something like this be live before our Q3 push?</span>
      </div>
      <div className="slack-block">
        <span className="lbl">Generated Response:</span>
        <span className="val">Dana, overnight tour requests answered in under a minute is exactly the gap this closes, and operators your size are live in days, not quarters. Worth 20 minutes to map it to your 9 sites before Q3? I have Tuesday or Thursday.</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">&#128193; Battlecard</span>
        <span className="slack-action">&#128203; CRM</span>
        <span className="slack-action">&#128229; Inbox</span>
        <span className="slack-action">&#128279; LinkedIn</span>
      </div>
      <div className="slack-thread">&#8618; 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>Summit Storage Group | Marcus Hale</strong> &middot; <span style={{color:"#A8AFC0"}}>Demo Held &middot; Stage: Trial pending</span>
      </div>
      <div style={{fontSize:12,color:"#A8AFC0",marginBottom:10}}>Recommended for: your AE</div>
      <div className="slack-source-line">
        <strong>Source:</strong> CRM &middot; <strong>Run:</strong> AICRO Rounds &middot; Mon May 18
      </div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Contact:</span>
          <span className="v">Marcus Hale</span>
          <span className="k" style={{marginTop:6}}>Title:</span>
          <span className="v">VP Operations &middot; Self-Storage</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">m.hale@summitstorage.example</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Summit Storage Group &middot; 30 facilities</span>
        </div>
      </div>
      <div className="slack-engagement">
        <div className="slack-engagement-head">&#128202; Engagement</div>
        <div className="slack-engagement-line">&bull; Last meaningful activity: <strong>14d ago</strong></div>
        <div className="slack-engagement-line">&bull; Pattern: <em>Saw demo, no trial activation</em></div>
      </div>
      <div className="slack-block" style={{marginTop:10}}>
        <span style={{fontSize:12.5,color:"#fff",fontWeight:600}}>&#128222; TODAY &middot; PHONE &#8594; Marcus Hale (+1 ###-###-####)</span>
      </div>
      <div className="slack-quote">
        Marcus, Rounds flagged your account. You saw the demo on May 4 and haven&rsquo;t spun up the trial yet. Give me 15 minutes to point the agent at your two highest-traffic facilities and show after-hours inquiries answered in real time. Tuesday or Wednesday?
      </div>
      <div className="slack-callout">&#128222; If voicemail: Marcus, following up on the May 4 demo. Texting you a short clip of the agent handling an after-hours storage inquiry end to end.</div>
      <div className="slack-callout" style={{color:"#A8AFC0",marginTop:8}}>
        <strong style={{color:"#fff"}}>Why now:</strong> Demo held 14 days ago, no trial activation, no follow-up logged. 30-facility operator means agent value compounds across every site at once.
      </div>
      <div className="slack-signals">
        <span className="sl">Signals observed:</span>
        <ul>
          <li>Demo held May 4, 14 days ago, no trial activation in CRM</li>
          <li>30 facilities with overnight + weekend inquiry volume, direct fit for after-hours capture</li>
          <li>Posted 2 leasing-coordinator roles last quarter, manual lead handling at capacity</li>
        </ul>
      </div>
      <div className="slack-actions">
        <span className="slack-action">View Deal</span>
        <span className="slack-action success">&#10003; Handled</span>
        <span className="slack-action">&#128202; Show 3 similar closes</span>
        <span className="slack-action">&#8635; Try another angle</span>
        <span className="slack-action">&#128161; 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}}>
          &#8627; Reply Agent &middot; 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}}>
            &#8627; Inbound Sales Agent &middot; AICRO Rounds
          </div>
          <SalesActionCard/>
        </div>
      </div>
    </div>
  );
}

// ─── Phase 4 - Compound ─────────────────
function PhaseCompound() {
  const cards = [
    { l:"CAC", v:"-54%", d:"vs in-house SDR + manager" },
    { l:"Demo to trial activation", v:"+118%", d:"AICRO Rounds + Reply Agent" },
    { l:"Net-new operators in pipeline", v:"3.2x", d:"signal coverage uplift" },
    { l:"Time to insight", v:"-72%", d:"signal to action" },
  ];
  return (
    <div>
      <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:14,marginBottom:18}}>
        {cards.map((c,i) => (
          <div key={i} className="card" style={{padding:22}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:8}}>{c.l}</div>
            <div style={{fontSize:32,fontWeight:600,color:"var(--mint-deep)",letterSpacing:"-0.02em",lineHeight:1}}>{c.v}</div>
            <div style={{fontSize:12,color:"var(--slate-500)",marginTop:6}}>{c.d}</div>
          </div>
        ))}
      </div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
        <div className="card" style={{padding:24}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:10}}>Cadence</div>
          <h3 style={{marginBottom:8,fontSize:18}}>Monday: signal review.<br/>Friday: pipeline MBR.<br/>Quarterly: board-ready pipeline math.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Doug walks the room weekly. Every reply, every demo booked, every operator closed makes the next signal sharper.</p>
        </div>
        <div className="card" style={{padding:24}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:10}}>Compounding loop</div>
          <h3 style={{marginBottom:8,fontSize:18}}>Each operator you close<br/>makes the next one easier to find.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Closed deals feed back into the seed list as lookalikes. Quarterly refresh tunes the signal pack against the operator profiles that actually convert.</p>
        </div>
      </div>
    </div>
  );
}

// ─── System tabs - color-coded workflows ─────────────────────────────────
function SignalToScale() {
  const phases = [
    {
      num:"PHASE 01", title:"Detect", head:"Detect the signal across six surfaces.",
      body:"Leasing-agent job posts, new-site announcements, reviews citing missed inquiries, tech-stack gaps, funding events, and association rosters. The signal map fires when a PropTech buyer is feeling the exact pain your product solves: slow response and manual lead handling at scale.",
      color:"#21A8F2", colorTint:"#E9F5FE",
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/>
        </svg>
      ),
      Render: PhaseDetect,
    },
    {
      num:"PHASE 02", title:"Outreach", head:"Intelligent outreach.",
      body:"Three products, one campaign. AICRO Send runs the email engine across 75 warmed inboxes. AICRO Connect runs LinkedIn in parallel. The Outreach Agent personalizes every message from the operator signal that triggered it, peer to peer, never a vendor pitch.",
      color:"#9D4EDD", colorTint:"#F4ECFE",
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/>
        </svg>
      ),
      Render: PhaseOutreach,
    },
    {
      num:"PHASE 03", title:"Convert", head:"Booked demos, handed to your AEs.",
      body:"The Reply Agent triages every reply and books the demo within minutes. AICRO Rounds grades stalled opportunities against your live CRM, recommends the next action, and routes it to the right AE in Slack. Demo-held-no-trial is a daily Rounds query.",
      color:"#0E9F66", colorTint:"#E5F9F0",
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 13l4 4L19 7"/>
        </svg>
      ),
      Render: PhaseConvert,
    },
    {
      num:"PHASE 04", title:"Compound", head:"Compound performance.",
      body:"Every operator you close sharpens the seed list. Closed-deal profiles feed back as lookalikes, so the signal gets more accurate every month. Monday&rsquo;s signal review becomes the board-ready pipeline math.",
      color:"#FF8559", colorTint:"#FFEEE5",
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/>
        </svg>
      ),
      Render: PhaseCompound,
    },
  ];
  const [active, setActive] = useState(0);
  const p = phases[active];
  const Body = p.Render;
  return (
    <section className="section section-soft" id="system">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">02 / The system in motion</span>
          <h2>Signal to scale, in four phases.</h2>
          <p>Click each phase to switch the live workflow below. Detect, Outreach, Convert, Compound. Each is a different color and a different surface.</p>
        </div>
        <div className="s2s" style={{borderTop:`4px solid ${p.color}`,transition:"border-color .25s ease"}}>
          <div className="s2s-head" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:0}}>
            {phases.map((ph, i) => {
              const isActive = i === active;
              return (
                <div
                  key={i}
                  onClick={() => setActive(i)}
                  style={{
                    cursor:"pointer",
                    padding:"22px 24px",
                    background: isActive ? "#fff" : ph.colorTint,
                    borderBottom: isActive ? `4px solid ${ph.color}` : "4px solid transparent",
                    borderRight: i < 3 ? "1px solid var(--mist)" : "none",
                    display:"flex",alignItems:"center",gap:14,
                    transition:"all .2s ease",
                    position:"relative",
                  }}
                >
                  <div style={{
                    width:36,height:36,borderRadius:10,
                    background: ph.color,
                    color:"#fff",
                    display:"flex",alignItems:"center",justifyContent:"center",
                    flexShrink:0,
                    boxShadow: isActive ? `0 0 0 4px ${ph.colorTint}` : "none",
                    transition:"box-shadow .2s ease",
                  }}>
                    {ph.icon}
                  </div>
                  <div style={{display:"flex",flexDirection:"column",gap:2,minWidth:0}}>
                    <span style={{
                      fontFamily:"'JetBrains Mono',monospace",
                      fontSize:9.5,letterSpacing:"0.10em",fontWeight:600,
                      color: isActive ? ph.color : "var(--slate-500)",
                      textTransform:"uppercase",
                    }}>{ph.num} {isActive ? "· active" : "· click"}</span>
                    <span style={{
                      fontSize:17,fontWeight:600,letterSpacing:"-0.01em",
                      color: isActive ? "var(--shark)" : "var(--slate-700)",
                    }}>{ph.title}</span>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{padding:32, borderTop:`1px solid ${p.colorTint}`}}>
            <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:14}}>
              <span style={{
                padding:"4px 10px",borderRadius:99,
                background: p.colorTint, color: p.color,
                fontFamily:"'JetBrains Mono',monospace",fontSize:10,
                letterSpacing:"0.08em",fontWeight:700,textTransform:"uppercase",
              }}>{p.num} &middot; {p.title}</span>
            </div>
            <div style={{display:"grid",gridTemplateColumns:"1fr",gap:14,marginBottom:24,maxWidth:780}}>
              <h3 style={{fontSize:24}}>{p.head}</h3>
              <p style={{color:"var(--slate-500)",fontSize:15}} dangerouslySetInnerHTML={{__html: p.body}}></p>
            </div>
            <Body/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Matrix ─────────────────────────────────────
function Matrix() {
  const cols = ["Generic agency", "In-house build", "DIY tool stack", "AICRO"];
  const rows = [
    { row: "Time to first demo", vals: [2, 1, 2, 4], aicro: "Day 30 to 45" },
    { row: "Signal-grounded outreach", vals: [1, 2, 2, 4], aicro: "6-source signal layer" },
    { row: "PropTech operator in the room", vals: [1, 2, 1, 4], aicro: "Doug, weekly" },
    { row: "Reply triage in Slack", vals: [1, 1, 2, 4], aicro: "Reply Agent live" },
    { row: "Demo booked + routed to AE", vals: [1, 2, 1, 4], aicro: "Qualified handoff" },
    { row: "Cost predictability", vals: [3, 1, 2, 4], aicro: "One retainer, no headcount" },
    { row: "CRE operator buyer fluency", vals: [1, 2, 1, 4], aicro: "RemoteLock + active book" },
  ];
  return (
    <section className="section" id="position">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">03 / Position</span>
          <h2>Not an agency. Not a tool. A fractional revenue org.</h2>
          <p>A CRO, a delivery team, and a product platform in one engagement, inside your CRM, paid as one monthly retainer.</p>
        </div>
        <div className="matrix">
          <table>
            <thead>
              <tr>
                <th style={{width:"24%"}}> </th>
                {cols.map((c,i) => (
                  <th key={i} className={c === "AICRO" ? "aicro" : ""}>{c}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r,i) => (
                <tr key={i}>
                  <td className="row-label">{r.row}</td>
                  {r.vals.map((v,j) => (
                    <td key={j} className={j === 3 ? "aicro" : ""}>
                      {j === 3 ? (
                        <span style={{display:"inline-flex",alignItems:"center",gap:8,fontWeight:500,color:"var(--slate-900)"}}>
                          <span style={{width:14,height:14,borderRadius:"50%",background:"var(--mint-tint)",color:"var(--mint-deep)",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:10,fontWeight:700}}>&#10003;</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>
  );
}

// ─── Case Studies ─────────────────
function CaseStudies() {
  const cases = [
    {
      co: "RemoteLock",
      stage: "Same buyer as our book",
      sector: "PropTech · Smart Access SaaS",
      quote: "Smart-access SaaS selling into the same coworking, multifamily, and hospitality operators AICRO runs across the active book. Operators answered when the outreach spoke their stack, including named groups like Greystar and Namdar.",
      attr: "RemoteLock · PropTech engagement",
      systems: ["Operator-to-Operator Outbound", "Vertical Segmentation", "Stack-Specific Targeting", "Reply Triage + Routing"],
      metrics: [
        { v: "47%", l: "LinkedIn PRR", live: true },
        { v: "Same buyer", l: "as our book" },
        { v: "Greystar", l: "+ Namdar replied" },
      ],
    },
    {
      co: "Henry AI",
      stage: "AI-native CRE platform",
      sector: "AI Platform · CRE Capital Markets",
      quote: "An AI platform for CRE capital-markets brokers. AICRO runs their cold outbound. The same play we run across the book: an AI-native CRE product that still needs a net-new pipeline engine above it.",
      attr: "Henry AI · AI platform for CRE",
      systems: ["Lookalike Targeting", "Operator-to-Broker Outbound", "Signal-Based Sequencing", "Reply Triage"],
      metrics: [
        { v: "AI for CRE", l: "capital markets" },
        { v: "Outbound", l: "run by AICRO" },
        { v: "Same play", l: "as our book", live: true },
      ],
    },
    {
      co: "Capitalize",
      stage: "AI · scaled to 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: "Series B", l: "secured", live: true },
        { v: "+187%", l: "pipeline / 90d" },
        { v: "AI-native", l: "GTM" },
      ],
    },
    {
      co: "Gumption",
      stage: "CRE marketplace",
      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: "2x", l: "conversion" },
        { v: "3.5x", l: "deal velocity" },
      ],
    },
    {
      co: "Worth Clark",
      stage: "Real estate brokerage",
      sector: "Real Estate Brokerage",
      quote: "Around half of every positive responder schedules a call immediately. The combination of reach and close rate is why this motion scales for an operator.",
      attr: "Worth Clark · brokerage engagement",
      systems: ["Multi-Channel Outbound", "Agent Recruiting Funnel", "Reply Triage", "CRO-led Cadence"],
      metrics: [
        { v: "~50%", l: "of positives to meeting", live: true },
        { v: "Operator", l: "recruiting funnel" },
        { v: "Multi-channel", l: "engine" },
      ],
    },
    {
      co: "Johnson Capital",
      stage: "CRE capital advisory",
      sector: "CRE Capital Advisory",
      quote: "The right-fit track is finding the right people, and meetings are landing in our broker calendar weekly. The motion knows our industry.",
      attr: "Johnson Capital · advisory engagement",
      systems: ["Signal-First Outbound", "Multi-Channel Sequencing", "Right-Fit Track", "CRO-led Pipeline Math"],
      metrics: [
        { v: "Weekly", l: "demos booked", live: true },
        { v: "Broker", l: "calendar fills" },
        { v: "CRE", l: "capital advisory" },
      ],
    },
  ];
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">04 / Proof</span>
          <h2>We&rsquo;ve taken AI and PropTech to market. Repeatedly.</h2>
          <p>Six engagements that say the same thing: we know this buyer, we know AI-native go-to-market, and we know how to put a product in front of operators who actually move.</p>
        </div>
        <div className="cs-grid" style={{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:18}}>
          {cases.map((c,i) => (
            <div className="cs-card" key={i}>
              <div className="cs-head">
                <div>
                  <div className="cs-co">{c.co}</div>
                  <div style={{fontSize:12,color:"var(--slate-500)",marginTop:2}}>{c.sector}</div>
                </div>
                <span className="cs-stage">{c.stage}</span>
              </div>
              <div className="cs-body">
                <p className="cs-quote">{c.quote}</p>
                <div className="cs-attr">{c.attr}</div>
                <div className="cs-systems">
                  <span className="cs-systems-lbl">Systems delivered</span>
                  {c.systems.map((s,j) => <div className="cs-system" key={j}>{s}</div>)}
                </div>
              </div>
              <div className="cs-metrics">
                {c.metrics.map((m,j) => (
                  <div className="cs-metric" key={j}>
                    <span className={"v " + (m.live ? "live" : "")}>{m.v}</span>
                    <span className="l">{m.l}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CTA ─────────────────────────────────────
function CTA() {
  return (
    <section className="section" id="cta">
      <div className="wrap">
        <div className="cta-block">
          <div className="cta-block-bg"></div>
          <div className="cta-left" style={{flex:1}}>
            <span className="eyebrow" style={{color:"rgba(255,255,255,.5)"}}>05 / Let&rsquo;s talk</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>Want to see it run? Let&rsquo;s walk it together.</h2>
            <p>15 minutes, live. We&rsquo;ll show the signal layer firing, the operator-to-operator sequences, and the reply triage in Slack, against a PropTech buyer like yours. No deck, no slides.</p>
            <div style={{marginTop:32,display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
              <a href="https://calendly.com/doug-aicro/walkthrough"
                 target="_blank" rel="noopener"
                 className="btn btn-lg"
                 style={{background:"#FF8559",color:"#fff",border:"none",fontWeight:600,padding:"14px 28px",borderRadius:99,fontSize:15,textDecoration:"none",letterSpacing:"-0.005em"}}>
                Book a 15-min walkthrough &rarr;
              </a>
            </div>
            <div style={{marginTop:18,fontSize:12,color:"rgba(255,255,255,0.45)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>
              calendly.com/doug-aicro/walkthrough
            </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">AICRO &middot; OVERVIEW &middot; 2026</span>
      </div>
      <div>doug@aicro.co</div>
      <div className="footer-meta">&copy; 2026 AICRO &middot; Doug Shankman &amp; Josh Kulchin, Co-Founders</div>
    </footer>
  );
}

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

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

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