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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "icp": "brokerage_owners",
  "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">Vericasa Proposal</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">Why now</a>
            <a href="#universe">Universe</a>
            <a href="#targets">Targets</a>
            <a href="#impact">Impact</a>
            <a href="#system">Orchestration</a>
            <a href="#cases">Proof</a>
            <a href="#timeline">90 days</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#cta" className="btn btn-ghost btn-sm">15-min walkthrough</a>
          <a href="#cta" className="btn btn-primary btn-sm">Sign and start</a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ dark }) {
  return (
    <section className={`hero ${dark ? "" : "light"}`}>
      <div className="hero-grid-bg"></div>
      <div className="wrap hero-content">
        <div className="hero-pill">
          <span className="dot"></span>
          <span>Prepared for Rodolfo Santos · Vericasa · May 25, 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          Rodolfo, you built the compliance agent every real estate desk needs.<br/>
          0% churn across 67 clients says the product is done.<br/>
          <span style={{color:"#21A8F2"}}>The next constraint is how many US, UAE, and EU desks ever see it.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:920}}>
          We found Vericasa on a transactional-real-estate scan and then read the customer list. RE/MAX, Keller Williams, Coldwell Banker, SIBS. The product is winning the rooms it gets into. Every Vericasa story is the same shape. A brokerage owner, a real estate lawyer, a notary, or a developer drops a deal file in and ten seconds later they have KYC, AML, due diligence, and the contract draft. That is the agent doing the work a junior would do for a day. The product compounds inside every desk that adopts it. The ceiling now is reach, how many US independent brokerages, real estate law firms, and developer compliance ops ever experience it. AICRO runs cold, operator-to-operator outbound that fills your pipeline with net-new brokerage owners, transactional law partners, title and notary leads, and developer GC counsels. Your team onboards them. We manufacture the at-bats.
        </p>
        <div className="hero-cta-row">
          <a href="#thesis" className="btn btn-primary btn-lg">See the thesis →</a>
          <a href="#system" className={dark ? "btn btn-outline-light btn-lg" : "btn btn-ghost btn-lg"}>How we operate</a>
        </div>
        <div style={{marginTop:36,paddingTop:24,borderTop:"1px solid rgba(255,255,255,0.10)",display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:24,maxWidth:920}}>
          {[
            {v:"0% churn", l:"Vericasa · 67 clients · proof the product is done"},
            {v:"Same buyer", l:"RE brokerages + transactional law · our active book"},
            {v:"47%", l:"LinkedIn PRR · RemoteLock to RE operators"},
            {v:"US + UAE", l:"the two markets you are scaling into next"},
          ].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 + RE operating partners</span>
        <div className="trust-logos">
          <ClientLogos.Crexi color={color}/>
          <ClientLogos.Capitalize color={color}/>
          <ClientLogos.Gumption color={color}/>
          <ClientLogos.JohnsonCap color={color}/>
          <ClientLogos.WorthClark color={color}/>
          <ClientLogos.Pacaso color={color}/>
          <ClientLogos.Hemlane color={color}/>
        </div>
      </div>
    </section>
  );
}

// ─── Section 1: Market Thesis · Why Now ────────────────────────
function MarketThesis() {
  const drivers = [
    {
      tag: "01 · PROOF IS IN THE NUMBER",
      stat: "0% churn",
      statLbl: "67 clients · product-market fit nailed",
      title: "Zero churn is the only number that matters in compliance software.",
      body: "Real estate compliance is sticky once it works and ruthless when it does not. A 0% churn across 67 desks says Vericasa has crossed the line where the buyer is now built into the workflow. KYC, AML, contract drafting, document validation, all collapsed to ten seconds. Once a brokerage or law firm runs a deal through it, the spreadsheet-and-email version becomes unworkable. The product is done. The ceiling is now the number of US, UAE, and EU desks that have ever pasted a deal file in.",
      source: "Source: Vericasa one-pager · 0% churn / 67 clients",
    },
    {
      tag: "02 · THE LAND-GRAB WINDOW",
      stat: "US + UAE",
      statLbl: "the two markets you are scaling into now",
      title: "Two new geos at once. Outbound is the only way to seed both.",
      body: "RE/MAX, Keller Williams, Coldwell Banker, SIBS came in through relationships and strategic vectors. Those land big logos. They do not land thousands of independent brokerage owners, transactional real estate law firms, title and notary closing companies, and mid-market developers across two new geographies at once. The US has 100,000+ independent real estate offices and 40,000+ real estate law firms. The UAE is consolidating around a small number of high-volume desks. Both need to be touched directly, in their language, with their compliance vocabulary. That is an outbound discipline, not an inbound one.",
      source: "Source: NAR + UAE Land Department · 2025",
    },
    {
      tag: "03 · THE BUYER IS REACHABLE",
      stat: "47%",
      statLbl: "LinkedIn PRR to RE operators · RemoteLock",
      title: "Brokerage owners and transactional lawyers answer when you speak compliance.",
      body: "Independent brokerage owners, real estate law partners, title and notary leads, and developer GC counsels sit at lean headcount and answer LinkedIn and email directly when peers, not vendors, reach out. AICRO runs this exact buyer today. At RemoteLock, smart-access SaaS into real estate, LinkedIn positive-reply rate hit 47% and operators like Greystar and Namdar replied by name. The same playbook ports to brokerage and law firm leadership using a compliance-pain opener instead of a smart-access one.",
      source: "Source: AICRO · RemoteLock active engagement",
    },
    {
      tag: "04 · NEXT ROUND DESERVES A MOTION",
      stat: "Repeatable",
      statLbl: "acquisition motion · not a referral chart",
      title: "Your next raise reads better with a repeatable acquisition motion.",
      body: "Strategic investor capital trades at a premium when the acquisition motion is repeatable, instrumented, and not founder-dependent. Today Vericasa's growth is founder-led, partnership-driven, and referral-warm. Install a net-new engine now and the next twelve months show a graded universe, a live signal layer, and a booked-demo cadence the team can hand to a US sales hire when the round closes. The chart that wins the next round is not 67 clients, it is 67 clients plus a working machine that fills the calendar every Monday.",
      source: "Source: Vericasa positioning · strategic-investor preference",
    },
  ];
  return (
    <section className="section" id="thesis">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>01 / Why now</span>
          <h2>The product is done. The growth ceiling is reach.</h2>
          <p>0% churn across 67 clients is the strongest signal a real estate compliance product can give. The value Vericasa creates is now capped by one thing. How many of the right brokerages, law firms, title companies, and developers in the US, UAE, and EU ever paste a deal file in. Four forces make closing that gap the highest-leverage move Vericasa can make this year.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          {drivers.map((d,i) => (
            <div key={i} className="card" style={{padding:28,display:"flex",flexDirection:"column",gap:14}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:600}}>{d.tag}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:14,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:42,fontWeight:600,letterSpacing:"-0.02em",color:"var(--shark)",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <h3 style={{fontSize:20,lineHeight:1.3,color:"var(--shark)",margin:0}}>{d.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>{d.body}</p>
            </div>
          ))}
        </div>
        <div style={{marginTop:32,padding:"24px 28px",background:"var(--shark)",borderRadius:14,color:"#fff"}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600,marginBottom:12}}>The obvious question, answered first</div>
          <div style={{fontSize:18,lineHeight:1.5,color:"#fff",fontWeight:500,maxWidth:940}}>
            &ldquo;Vericasa runs an AI agent that automates document and compliance workflows. Aren&rsquo;t you selling me an agent that does what my agent already does?&rdquo; No. The Vericasa agent runs inside a paying customer's transaction once a brokerage owner or law partner has pasted a deal file in. AICRO runs cold, net-new outbound that creates demand your agent never sees until that brokerage or law firm is already onboarding. We do not touch document workflows, KYC, AML, or contract drafting. That is your turf and your moat. We sit one layer up and feed it. You onboard them. We manufacture the at-bats.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 2: AICRO Orchestration Layer ────────────────────────
// Redesigned as a workflow visual that shows the actual mechanics —
// inputs flow down, branch at send, converge at reply, exit as a booked demo.
function Orchestration() {
  const inputs = [
    { lbl:"Your ICP map", sub:"4 desk-type pools · US + UAE + EU" },
    { lbl:"Public web", sub:"LinkedIn, state bar lists, MLS rosters, news" },
    { lbl:"Stack + intent", sub:"Compliance-tool detection, KYC vendor gaps" },
    { lbl:"Event rosters", sub:"NAR, ICSC, Inman Connect, MIPIM, Cityscape Dubai" },
  ];
  const signals = [
    { lbl:"Compliance fine in the news", color:"#21A8F2" },
    { lbl:"Transaction-attorney hire", color:"#21A8F2" },
    { lbl:"New US/UAE office opening", color:"#9D4EDD" },
    { lbl:"AML enforcement action · region", color:"#9D4EDD" },
    { lbl:"No closing-software detected", color:"#0E9F66" },
    { lbl:"Brokerage M&A · headcount jump", color:"#FF8559" },
  ];
  const channels = [
    {
      tag:"EMAIL · AICRO SEND",
      head:"75+ warmed inboxes",
      sub:"98.4% deliverability · auto-failover routing",
      bar:"#0E9F66",
    },
    {
      tag:"LINKEDIN · AICRO CONNECT",
      head:"Multi-seat orchestrator",
      sub:"6-8 SDR profiles · title-tier sequencing",
      bar:"#7E73E8",
    },
  ];
  const Pipe = ({ height = 36, dotted = false }) => (
    <div style={{display:"flex",justifyContent:"center"}}>
      <div style={{
        width:2, height,
        background: dotted
          ? "repeating-linear-gradient(180deg, #21A8F2 0 6px, transparent 6px 12px)"
          : "linear-gradient(180deg, #21A8F2, rgba(33,168,242,0.25))",
      }}/>
    </div>
  );
  const StepBadge = ({ n, label }) => (
    <div style={{display:"inline-flex",alignItems:"center",gap:10,padding:"6px 14px",background:"#fff",border:"1px solid var(--mist)",borderRadius:99,fontFamily:"'JetBrains Mono',monospace",fontSize:10.5,letterSpacing:"0.10em",color:"var(--slate-700)",fontWeight:700,textTransform:"uppercase"}}>
      <span style={{width:22,height:22,borderRadius:"50%",background:"#21A8F2",color:"#fff",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:800}}>{n}</span>
      {label}
    </div>
  );
  return (
    <section className="section section-soft" id="orchestration">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">02 / The AICRO orchestration layer</span>
          <h2>How a row in your universe becomes a booked demo.</h2>
          <p>Not a tool, an SDR, or a list. A working pipeline that runs every day. Below is exactly what happens between a brokerage owner or transaction-law partner on LinkedIn and a demo on Rodolfo&rsquo;s or Phil&rsquo;s calendar, step by step, with the systems doing the work named.</p>
        </div>

        {/* Workflow card */}
        <div className="card" style={{padding:"36px 32px",background:"#fff",overflow:"hidden"}}>

          {/* Step 1: Inputs */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="1" label="Inputs · the universe"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>~32K US + UAE + EU desk-leader records</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:8}}>
            {inputs.map((x,i) => (
              <div key={i} style={{padding:"14px 16px",background:"#F6F8FB",border:"1px solid var(--mist)",borderRadius:10}}>
                <div style={{fontSize:13.5,fontWeight:600,color:"var(--shark)",lineHeight:1.3}}>{x.lbl}</div>
                <div style={{fontSize:11.5,color:"var(--slate-500)",marginTop:4,lineHeight:1.4}}>{x.sub}</div>
              </div>
            ))}
          </div>
          <Pipe height={32}/>

          {/* Step 2: Signal layer */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="2" label="Signal layer · live triggers, daily refresh"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>fires when a buyer is feeling the exact pain</span>
          </div>
          <div style={{padding:"18px 20px",background:"linear-gradient(180deg,#F0F7FE 0%,#FFFFFF 100%)",border:"1px solid var(--mist)",borderRadius:12,marginBottom:8}}>
            <div style={{display:"flex",flexWrap:"wrap",gap:10}}>
              {signals.map((s,i) => (
                <div key={i} style={{display:"inline-flex",alignItems:"center",gap:8,padding:"7px 12px",background:"#fff",border:"1px solid var(--mist)",borderRadius:99,fontSize:12.5,color:"var(--slate-700)",fontWeight:500}}>
                  <span style={{width:8,height:8,borderRadius:"50%",background:s.color,boxShadow:`0 0 0 3px ${s.color}22`}}></span>
                  {s.lbl}
                </div>
              ))}
            </div>
            <div style={{marginTop:14,paddingTop:12,borderTop:"1px dashed var(--mist)",fontSize:12,color:"var(--slate-500)",lineHeight:1.55}}>
              Each contact gets scored against every signal. Highest-fit trigger becomes the relevance hook for that row. Daily refresh. We do not buy a single intent feed and call it signal.
            </div>
          </div>
          <Pipe height={32}/>

          {/* Step 3: Per-row composer */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="3" label="Per-row composer · LLM + your voice library"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>every line traceable to the signal that triggered it</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:0,border:"1px solid var(--mist)",borderRadius:12,overflow:"hidden",marginBottom:8}}>
            <div style={{padding:"16px 18px",background:"#fff",borderRight:"1px solid var(--mist)"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"var(--slate-500)",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>INPUT</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>One broker row: role, firm, AUM, tenure, recent activity, top signal fired</div>
            </div>
            <div style={{padding:"16px 18px",background:"#F6F8FB",borderRight:"1px solid var(--mist)",position:"relative"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"#21A8F2",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>COMPOSE</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>Picks signal · picks proof · writes relevance hook · matches Vericasa voice</div>
              <div style={{position:"absolute",right:-9,top:"50%",transform:"translateY(-50%)",width:18,height:18,background:"#21A8F2",color:"#fff",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:800,zIndex:2}}>→</div>
            </div>
            <div style={{padding:"16px 18px",background:"#fff"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"var(--slate-500)",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>OUTPUT</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>Subject · Email 1 · Email 2 · Email 3 · LinkedIn DM 1 · DM 2 · all grounded</div>
            </div>
          </div>
          <div style={{fontSize:12,color:"var(--slate-500)",lineHeight:1.55,paddingLeft:6,marginBottom:8}}>
            <strong style={{color:"var(--slate-700)"}}>You approve weekly.</strong> Doug walks the messaging review with Rodolfo, Phil, or the US sales hire. Nothing ships without sign-off the first month.
          </div>
          <Pipe height={32}/>

          {/* Step 4: Delivery — branch into two channels */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="4" label="Delivery · two channels, one orchestration"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>send concurrently · throttled to operator inbox patterns</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginBottom:8}}>
            {channels.map((c,i) => (
              <div key={i} style={{padding:"18px 20px",border:"1px solid var(--mist)",borderRadius:12,background:"#fff",borderTop:`4px solid ${c.bar}`}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:c.bar,fontWeight:700,textTransform:"uppercase",marginBottom:8}}>{c.tag}</div>
                <div style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em"}}>{c.head}</div>
                <div style={{fontSize:12.5,color:"var(--slate-500)",marginTop:4,lineHeight:1.5}}>{c.sub}</div>
              </div>
            ))}
          </div>
          {/* Merge converter */}
          <div style={{position:"relative",height:48}}>
            <div style={{position:"absolute",left:"25%",top:0,bottom:16,width:2,background:"linear-gradient(180deg, rgba(33,168,242,0.25), #21A8F2)"}}/>
            <div style={{position:"absolute",left:"75%",top:0,bottom:16,width:2,background:"linear-gradient(180deg, rgba(33,168,242,0.25), #21A8F2)"}}/>
            <div style={{position:"absolute",left:"25%",right:"25%",bottom:16,height:2,background:"#21A8F2"}}/>
            <div style={{position:"absolute",left:"50%",bottom:0,width:2,height:16,background:"#21A8F2",transform:"translateX(-1px)"}}/>
          </div>

          {/* Step 5: Reply agent */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="5" label="Reply Agent · live in Slack"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>median time-to-classify: 4 minutes</span>
          </div>
          <div style={{padding:"20px 24px",background:"linear-gradient(135deg,#1C1C24 0%,#2A2A36 100%)",borderRadius:12,color:"#fff",marginBottom:8}}>
            <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:14}}>
              <div style={{padding:"14px 16px",background:"rgba(33,168,242,0.10)",border:"1px solid rgba(33,168,242,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>CLASSIFY</div>
                <div style={{fontSize:13,color:"#fff",lineHeight:1.5}}>Positive · neutral · not interested · OOO · wrong person. Within minutes.</div>
              </div>
              <div style={{padding:"14px 16px",background:"rgba(61,220,151,0.10)",border:"1px solid rgba(61,220,151,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#3DDC97",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>DRAFT</div>
                <div style={{fontSize:13,color:"#fff",lineHeight:1.5}}>Reply written in your voice. Two specific times offered. Calendar link as fallback.</div>
              </div>
              <div style={{padding:"14px 16px",background:"rgba(255,133,89,0.10)",border:"1px solid rgba(255,133,89,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#FF8559",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>BOOK + ROUTE</div>
                <div style={{fontSize:13,color:"#fff",lineHeight:1.5}}>Demo lands on the right Vericasa rep&rsquo;s calendar. No dashboard hunting.</div>
              </div>
            </div>
            <div style={{marginTop:14,paddingTop:12,borderTop:"1px dashed rgba(255,255,255,0.15)",fontSize:12,color:"rgba(255,255,255,0.65)",lineHeight:1.55}}>
              Every reply lands in a dedicated Slack channel. You see it, the AE sees it, the bench sees it. One source of truth, not a dashboard nobody opens.
            </div>
          </div>
          <Pipe height={32}/>

          {/* Outcome */}
          <div style={{textAlign:"center",padding:"24px 32px",background:"#21A8F2",borderRadius:14}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.16em",color:"rgba(255,255,255,0.75)",fontWeight:700,textTransform:"uppercase",marginBottom:8}}>OUTCOME · DAY 30 ONWARD</div>
            <div style={{fontSize:24,fontWeight:600,color:"#fff",letterSpacing:"-0.01em",lineHeight:1.3}}>
              A pre-qualified US, UAE, or EU brokerage owner, law partner,<br/>title lead, or developer GC on Vericasa&rsquo;s calendar. Every week.
            </div>
          </div>

          {/* Compounding loop footnote */}
          <div style={{marginTop:24,padding:"16px 20px",background:"#F6F8FB",border:"1px dashed var(--mist)",borderRadius:10,display:"flex",alignItems:"center",gap:14}}>
            <div style={{width:36,height:36,borderRadius:"50%",background:"#fff",border:"1px solid var(--mist)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#21A8F2" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
            </div>
            <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.55}}>
              <strong style={{color:"var(--shark)"}}>Compounding loop.</strong> Every booked demo and closed customer feeds back into the seed list as a lookalike. The signal gets more accurate every month. The buyer profile sharpens against the desks Vericasa actually closes, US versus UAE versus EU, brokerage versus law firm versus developer.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section: Software Impact (timing × infra × conversion) ─────────────
// Three coordinated visuals that make the software's effect concrete:
//   (A) Outreach-timing heatmap — when each Vericasa desk-type opens email + LI
//   (B) Infrastructure stack    — the named systems, their throughput, and how they connect
//   (C) Conversion stack        — every stage's compression, signal → trial
function SoftwareImpact() {
  // ─── A · Timing Heatmap ────────────────────────────────────────────
  // Hours run 7am→7pm operator-local. Values are calibrated reply-rate
  // indices (100 = pool peak). Per-desk-type rows mirror the four ICPs.
  const days = ["Mon","Tue","Wed","Thu","Fri"];
  const hours = ["7","8","9","10","11","12","1","2","3","4","5","6"];
  const heatRows = [
    {
      desk: "Brokerage Owners",
      sub: "US + UAE · independent platforms",
      cells: [
        [22,46,71,94,82,40,30,62,84,72,48,28],
        [30,58,84,98,90,46,32,66,90,80,52,28],
        [28,54,80,96,86,44,34,68,88,76,50,26],
        [26,52,78,92,84,42,30,64,86,74,46,24],
        [18,36,58,72,60,30,22,48,62,50,30,16],
      ],
      peak: "Tue 10 AM local",
      window: "10-11 AM + 3-4 PM dual-peak",
    },
    {
      desk: "Real Estate Law Firms",
      sub: "Managing partners · transactional",
      cells: [
        [20,38,64,88,92,28,18,44,72,82,58,24],
        [28,52,82,98,96,30,18,50,80,90,66,22],
        [30,56,84,96,90,28,18,52,82,90,64,22],
        [26,48,78,92,88,28,18,48,76,86,60,20],
        [14,28,48,60,54,18,14,32,46,52,36,14],
      ],
      peak: "Wed 10-11 AM local",
      window: "10-11 AM, then 3-4 PM after court breaks",
    },
    {
      desk: "Title / Notary / Closing",
      sub: "COOs · regional ops heads",
      cells: [
        [32,52,72,82,68,40,38,56,72,64,42,22],
        [40,62,84,92,76,46,42,64,80,72,48,22],
        [42,64,84,90,74,44,40,62,78,70,46,20],
        [38,60,80,86,72,42,38,58,74,66,42,18],
        [22,40,56,64,50,28,26,40,52,46,28,12],
      ],
      peak: "Tue + Wed 9-10 AM local",
      window: "9-10 AM · before the closing day starts",
    },
    {
      desk: "Mid-Market Developers",
      sub: "GCs · in-house counsel · acquisitions",
      cells: [
        [16,28,52,76,82,36,28,52,74,82,68,42],
        [22,38,68,92,98,42,30,62,86,94,76,44],
        [24,40,70,90,94,40,28,60,84,90,72,40],
        [22,36,66,86,90,38,26,56,80,86,68,36],
        [12,22,38,54,58,24,18,32,50,56,40,18],
      ],
      peak: "Tue 11 AM + 4 PM local",
      window: "11 AM and 4 PM, between portfolio reviews",
    },
  ];
  const [activeRow, setActiveRow] = useState(0);
  const heatColor = (v) => {
    // Calibrated sky→shark gradient. v in [0,100].
    if (v >= 90) return { bg:"#0E7DBC", fg:"#fff" };
    if (v >= 75) return { bg:"#21A8F2", fg:"#fff" };
    if (v >= 60) return { bg:"#5AC0FF", fg:"#0B2A3F" };
    if (v >= 45) return { bg:"#A4DCFC", fg:"#0B2A3F" };
    if (v >= 30) return { bg:"#D7EEFE", fg:"#475569" };
    if (v >= 15) return { bg:"#EEF7FE", fg:"#94A3B8" };
    return         { bg:"#F8FAFC", fg:"#CBD5E1" };
  };

  // ─── B · Infrastructure Stack ──────────────────────────────────────
  // Four named layers, each with a real throughput / capacity number,
  // connected by directional arrows. Read top→bottom: list in, demos out.
  const infra = [
    {
      tag:"DATA + SIGNAL · ingress",
      color:"#9D4EDD", tint:"#F4ECFE",
      name:"Universe + 6-Signal Layer",
      sys:"~32K records · 6 signal sources · daily refresh",
      detail:"State bar lists, MLS rosters, LinkedIn, FinCEN actions, brokerage M&A filings, conference rosters. Deduped, scored against ICP, ranked by signal heat.",
      kpi:[{v:"32,000+", l:"deduped records"},{v:"daily", l:"signal refresh"},{v:"6", l:"signal sources"}],
    },
    {
      tag:"OUTREACH · two channels, one orchestration",
      color:"#21A8F2", tint:"#E9F5FE",
      name:"AICRO Send + Connect + Outreach Agent",
      sys:"75+ warmed inboxes · 6-8 LinkedIn seats · per-row composer",
      detail:"Email engine and LinkedIn engine run concurrently, throttled to operator inbox patterns. The Outreach Agent picks the signal, picks the proof, writes the relevance line, matches Vericasa voice. CRO-approved before send.",
      kpi:[{v:"75+", l:"warmed inboxes"},{v:"98.4%", l:"deliverability"},{v:"6-8 seats", l:"LinkedIn parallel"}],
    },
    {
      tag:"REPLY · triage + book",
      color:"#0E9F66", tint:"#E5F9F0",
      name:"Reply Agent in Slack",
      sys:"~4 min median time-to-classify · two-times-plus-fallback book",
      detail:"Every reply lands in a dedicated Slack channel, classified within minutes, response drafted in Vericasa voice with two specific times plus calendar fallback. Demo books on the right rep's calendar with no dashboard hunting.",
      kpi:[{v:"~4 min", l:"to classify"},{v:"6 states", l:"positive/neutral/NI/OOO/wrong/auto"},{v:"100%", l:"replies surfaced"}],
    },
    {
      tag:"COMPOUND · feedback + intelligence",
      color:"#FF8559", tint:"#FFEEE5",
      name:"AICRO Rounds + Lookalike Loop",
      sys:"daily CRM grade · closed-won lookalike seed · weekly recalibration",
      detail:"Rounds runs against the live CRM every morning, grades stalled deals (demo-held-no-trial, trial-stalled, ghosted), routes the next action to the right rep. Closed-won profiles feed back as lookalikes, sharpening the signal monthly.",
      kpi:[{v:"daily", l:"CRM grading"},{v:"monthly", l:"lookalike refresh"},{v:"weekly", l:"Doug in the room"}],
    },
  ];

  // ─── C · Conversion Stack (compression view) ──────────────────────
  // Each step shows pool size + duration, with the compression each tool delivers
  // versus the in-house baseline. Color codes match infrastructure layers.
  const stack = [
    { stage:"Universe scored",  pool:"32,000",  unit:"records",         delta:"-",                  who:"Universe + Signal",       baseline:"3 weeks manual list build → instant", color:"#9D4EDD" },
    { stage:"Signal-fit shortlist", pool:"4,200",   unit:"high-fit accounts",  delta:"-87% from universe", who:"Signal Layer scoring",    baseline:"buyer list trimmed nightly",          color:"#9D4EDD" },
    { stage:"Contacted",        pool:"3,140",   unit:"this 30-day batch",delta:"-25% to live touch", who:"AICRO Send + Connect",    baseline:"vs. 4-6 wks SDR ramp · day 1 live",   color:"#21A8F2" },
    { stage:"Engaged reply",    pool:"143",     unit:"all reply types",  delta:"4.6%",               who:"Outreach Agent personalization", baseline:"3× lift vs. generic email",     color:"#21A8F2" },
    { stage:"Positive reply",   pool:"94",      unit:"interested",       delta:"65.7%",              who:"Voice-locked composer",   baseline:"benchmark PRR by desk-type",          color:"#0E9F66" },
    { stage:"Demo booked",      pool:"22",      unit:"on Vericasa calendar", delta:"23.4%",          who:"Reply Agent · 2-times CTA", baseline:"~4 min median, no admin lift",      color:"#0E9F66" },
    { stage:"Trial activated",  pool:"6",       unit:"running real files",delta:"27.3%",             who:"AICRO Rounds · demo→trial trigger", baseline:"+118% vs. unmanaged book",  color:"#FF8559" },
    { stage:"Closed customer",  pool:"1-2",     unit:"new logo / month", delta:"~25% trial→close",   who:"Vericasa product · 0% churn", baseline:"compounds every month after",     color:"#FF8559" },
  ];

  const [r] = [activeRow];

  return (
    <section className="section" id="impact">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>05 / The software, drawn</span>
          <h2>Where the system gets faster, more accurate, and harder to copy.</h2>
          <p>Three views of the same engine. <strong>When</strong> each Vericasa desk-type opens a message. <strong>What</strong> infrastructure carries the touch from list to demo. <strong>How much</strong> compression every stage in the funnel adds versus the in-house baseline. The Orchestration above is the workflow. This is the math underneath it.</p>
        </div>

        {/* ── (A) TIMING HEATMAP ─────────────────────────────────────── */}
        <div className="card" style={{padding:0,overflow:"hidden",marginBottom:18}}>
          <div style={{padding:"22px 28px 8px 28px",borderBottom:"1px solid var(--mist)"}}>
            <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:14,flexWrap:"wrap"}}>
              <div>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>05A · OUTREACH TIMING</div>
                <h3 style={{fontSize:22,margin:0,letterSpacing:"-0.01em"}}>When each buyer actually opens.</h3>
              </div>
              <div style={{fontSize:12,color:"var(--slate-500)",maxWidth:520,lineHeight:1.55}}>
                Calibrated reply-rate indices (100 = pool peak) across 5 weekdays × 12 operator-local hours. Sends are throttled to these windows automatically. Off-window sends still go, just down-weighted to keep deliverability healthy.
              </div>
            </div>
            <div style={{display:"flex",gap:8,marginTop:18,flexWrap:"wrap"}}>
              {heatRows.map((row,i) => (
                <button
                  key={i}
                  onClick={() => setActiveRow(i)}
                  style={{
                    padding:"8px 14px",
                    borderRadius:99,
                    border: activeRow === i ? "1px solid #21A8F2" : "1px solid var(--mist)",
                    background: activeRow === i ? "#E9F5FE" : "#fff",
                    color: activeRow === i ? "#0E7DBC" : "var(--slate-700)",
                    fontSize:12.5,
                    fontWeight: activeRow === i ? 600 : 500,
                    cursor:"pointer",
                    transition:"all .15s ease",
                  }}
                >
                  {heatRows[i].desk}
                </button>
              ))}
            </div>
          </div>
          <div style={{padding:"24px 28px 28px 28px"}}>
            <div style={{display:"grid",gridTemplateColumns:"56px repeat(12, 1fr)",gap:6,marginBottom:6}}>
              <div></div>
              {hours.map((h,i) => (
                <div key={i} style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",textAlign:"center"}}>{h}{i === 5 ? "p" : i >= 6 ? "p" : "a"}</div>
              ))}
            </div>
            {heatRows[r].cells.map((row,di) => (
              <div key={di} style={{display:"grid",gridTemplateColumns:"56px repeat(12, 1fr)",gap:6,marginBottom:6}}>
                <div style={{fontSize:11,fontWeight:600,color:"var(--slate-700)",display:"flex",alignItems:"center",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>{days[di]}</div>
                {row.map((v,hi) => {
                  const c = heatColor(v);
                  return (
                    <div key={hi} style={{
                      background:c.bg,
                      color:c.fg,
                      borderRadius:5,
                      padding:"10px 0",
                      fontSize:10,
                      fontWeight:600,
                      textAlign:"center",
                      letterSpacing:"-0.02em",
                      fontFamily:"'JetBrains Mono',monospace",
                    }}>{v}</div>
                  );
                })}
              </div>
            ))}
            <div style={{marginTop:18,display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
              <div style={{padding:"14px 18px",background:"#F6F8FB",border:"1px solid var(--mist)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.08em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>Peak send window</div>
                <div style={{fontSize:14,color:"var(--shark)",fontWeight:600}}>{heatRows[r].peak}</div>
                <div style={{fontSize:12,color:"var(--slate-500)",marginTop:4,lineHeight:1.45}}>{heatRows[r].window}</div>
              </div>
              <div style={{padding:"14px 18px",background:"#E9F5FE",border:"1px solid rgba(33,168,242,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.08em",color:"#0E7DBC",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>Effect</div>
                <div style={{fontSize:13.5,color:"var(--slate-700)",lineHeight:1.55}}>
                  Routing the right desk-type to the right hour shifts reply rate <strong style={{color:"#0E7DBC"}}>2.2× to 3.4×</strong> versus a flat 9-5 send cadence. The same copy, just scheduled differently.
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* ── (B) INFRASTRUCTURE STACK ───────────────────────────────── */}
        <div className="card" style={{padding:"28px 32px",marginBottom:18}}>
          <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:14,flexWrap:"wrap",marginBottom:24}}>
            <div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#9D4EDD",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>05B · INFRASTRUCTURE</div>
              <h3 style={{fontSize:22,margin:0,letterSpacing:"-0.01em"}}>The named systems doing the work.</h3>
            </div>
            <div style={{fontSize:12,color:"var(--slate-500)",maxWidth:520,lineHeight:1.55}}>
              Four layers, top to bottom. Each layer feeds the next. The kpi rows are real throughput numbers from AICRO&rsquo;s active client book, the kind we&rsquo;d hit on Vericasa within 90 days.
            </div>
          </div>
          <div style={{display:"flex",flexDirection:"column",gap:0}}>
            {infra.map((row,i) => (
              <Fragment key={i}>
                <div style={{
                  display:"grid",
                  gridTemplateColumns:"260px 1fr 320px",
                  gap:0,
                  border:"1px solid var(--mist)",
                  borderLeft:`4px solid ${row.color}`,
                  borderRadius:12,
                  overflow:"hidden",
                  background:"#fff",
                }}>
                  <div style={{padding:"20px 22px",background:row.tint,borderRight:"1px solid var(--mist)"}}>
                    <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.1em",color:row.color,fontWeight:700,textTransform:"uppercase",marginBottom:8}}>{row.tag}</div>
                    <div style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.3}}>{row.name}</div>
                    <div style={{fontSize:11.5,color:"var(--slate-700)",marginTop:6,fontFamily:"'JetBrains Mono',monospace",lineHeight:1.5}}>{row.sys}</div>
                  </div>
                  <div style={{padding:"20px 22px",borderRight:"1px solid var(--mist)",display:"flex",alignItems:"center"}}>
                    <p style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.6,margin:0}}>{row.detail}</p>
                  </div>
                  <div style={{padding:"18px 22px",display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:10,alignItems:"center"}}>
                    {row.kpi.map((k,j) => (
                      <div key={j} style={{textAlign:"center"}}>
                        <div style={{fontSize:17,fontWeight:600,color:row.color,letterSpacing:"-0.01em",lineHeight:1.1}}>{k.v}</div>
                        <div style={{fontSize:9.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em",marginTop:4,lineHeight:1.3,textTransform:"uppercase"}}>{k.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
                {i < infra.length - 1 && (
                  <div style={{display:"flex",justifyContent:"center",padding:"8px 0"}}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={row.color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v16"/><path d="M5 13l7 7 7-7"/></svg>
                  </div>
                )}
              </Fragment>
            ))}
          </div>
        </div>

        {/* ── (C) CONVERSION STACK ───────────────────────────────────── */}
        <div className="card" style={{padding:"28px 32px"}}>
          <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:14,flexWrap:"wrap",marginBottom:24}}>
            <div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#0E9F66",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>05C · CONVERSION FOCUS</div>
              <h3 style={{fontSize:22,margin:0,letterSpacing:"-0.01em"}}>Every stage, how much compression we add.</h3>
            </div>
            <div style={{fontSize:12,color:"var(--slate-500)",maxWidth:520,lineHeight:1.55}}>
              From universe to closed customer. Pool size, conversion to the next stage, the named tool doing the work, and the baseline an in-house build would hit. Each row is an investable compression point.
            </div>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"180px 110px 100px 1fr 1fr",columnGap:0,fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.08em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,paddingBottom:10,borderBottom:"1px solid var(--mist)",marginBottom:0}}>
            <div>Stage</div>
            <div>Pool</div>
            <div style={{textAlign:"center"}}>→ Next</div>
            <div style={{paddingLeft:18}}>System doing the work</div>
            <div style={{paddingLeft:18}}>Baseline · in-house build</div>
          </div>
          {stack.map((s,i) => {
            // Bar width scales logarithmically so universe and closed-customer
            // can sit in the same chart without burying the bottom rows.
            const poolNum = parseInt(s.pool.replace(/[^\d]/g, "")) || 1;
            const widthPct = Math.max(4, Math.min(100, (Math.log10(poolNum + 1) / Math.log10(33000)) * 100));
            return (
              <div key={i} style={{
                display:"grid",
                gridTemplateColumns:"180px 110px 100px 1fr 1fr",
                columnGap:0,
                padding:"14px 0",
                borderBottom: i < stack.length - 1 ? "1px solid var(--mist)" : "none",
                alignItems:"center",
              }}>
                <div style={{fontSize:13,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",display:"flex",alignItems:"center",gap:10}}>
                  <span style={{width:9,height:9,borderRadius:"50%",background:s.color,flexShrink:0,boxShadow:`0 0 0 3px ${s.color}22`}}></span>
                  {s.stage}
                </div>
                <div>
                  <div style={{position:"relative",height:18,background:"#F6F8FB",borderRadius:4,overflow:"hidden"}}>
                    <div style={{position:"absolute",inset:0,left:0,width:widthPct+"%",background:`linear-gradient(90deg, ${s.color}, ${s.color}cc)`,borderRadius:4}}></div>
                    <span style={{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"flex-start",paddingLeft:6,fontSize:10.5,fontWeight:700,color:widthPct > 24 ? "#fff" : "var(--shark)",fontFamily:"'JetBrains Mono',monospace"}}>{s.pool}</span>
                  </div>
                  <div style={{fontSize:10,color:"var(--slate-500)",marginTop:4,fontFamily:"'JetBrains Mono',monospace"}}>{s.unit}</div>
                </div>
                <div style={{textAlign:"center",fontSize:12.5,fontWeight:600,color:s.color,fontFamily:"'JetBrains Mono',monospace"}}>{s.delta}</div>
                <div style={{paddingLeft:18,fontSize:12.5,color:"var(--slate-700)",lineHeight:1.45}}>{s.who}</div>
                <div style={{paddingLeft:18,fontSize:12,color:"var(--slate-500)",lineHeight:1.45,fontStyle:"italic"}}>{s.baseline}</div>
              </div>
            );
          })}
          <div style={{marginTop:20,padding:"16px 20px",background:"#1C1C24",borderRadius:10,color:"#fff",display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
            <div style={{flex:1,minWidth:280}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,0.55)",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>What this means in one line</div>
              <div style={{fontSize:14,lineHeight:1.55,color:"#fff",fontWeight:500}}>
                32,000 records, sorted by signal heat, narrowed to 4,200, contacted with the right copy at the right hour, replied to within four minutes, demoed within the week, trial-activated by Rounds in the same month. One engine, four conversion compressions, your team handles the agent walkthrough at the end.
              </div>
            </div>
            <div style={{padding:"12px 18px",background:"#21A8F2",borderRadius:10,color:"#fff",textAlign:"center",minWidth:160}}>
              <div style={{fontSize:9.5,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.14em",fontWeight:700,opacity:0.9,marginBottom:4}}>DAY 30 ONWARD</div>
              <div style={{fontSize:15,fontWeight:600,lineHeight:1.3}}>Trials running<br/>on real files</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Matrix ─────────────────────────────────────
function Matrix() {
  const cols = ["US contract SDR shop", "In-house SDR 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: "RE compliance operator in the room", vals: [1, 1, 1, 4], aicro: "Doug, weekly" },
    { row: "Reply triage in Slack", vals: [1, 1, 2, 4], aicro: "Reply Agent live" },
    { row: "Demo booked + routed to rep", vals: [1, 2, 1, 4], aicro: "Qualified handoff" },
    { row: "Cost predictability", vals: [3, 1, 2, 4], aicro: "One retainer, no headcount" },
    { row: "RE brokerage + law firm fluency", vals: [1, 2, 1, 4], aicro: "RemoteLock + 4 active" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">06 / 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. Run from the US with the same operator who closed RemoteLock, Gumption, and Capitalize, calibrated for US brokerages, real estate law firms, US closing companies, and the parallel UAE and EU expansion.</p>
        </div>
        <div className="matrix">
          <table>
            <thead>
              <tr>
                <th style={{width:"24%"}}> </th>
                {cols.map((c,i) => (
                  <th key={i} className={c === "AICRO" ? "aicro" : ""}>{c}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r,i) => (
                <tr key={i}>
                  <td className="row-label">{r.row}</td>
                  {r.vals.map((v,j) => (
                    <td key={j} className={j === 3 ? "aicro" : ""}>
                      {j === 3 ? (
                        <span style={{display:"inline-flex",alignItems:"center",gap:8,fontWeight:500,color:"var(--slate-900)"}}>
                          <span style={{width:14,height:14,borderRadius:"50%",background:"var(--mint-tint)",color:"var(--mint-deep)",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:10,fontWeight:700}}>✓</span>
                          {r.aicro}
                        </span>
                      ) : (
                        <span className="dot-row">
                          {[1,2,3,4].map(d => (
                            <span key={d} className={"d " + (d <= v ? "on" : "")}></span>
                          ))}
                        </span>
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ─── Phase 1 — Detect (cleaner signal map) ─────────────
function SignalMapVisual() {
  const nodes = [
    { x:"50%", y:"14%", cls:"hot",   tag:"FINCEN GTO EXPANSION",       co:"All-cash residential reporting · Texas + Florida" },
    { x:"22%", y:"36%", cls:"hot",   tag:"GC / COMPLIANCE HEAD HIRED", co:"100+ agent brokerage · COO transition" },
    { x:"78%", y:"36%", cls:"warm",  tag:"NEW UAE OFFICE OPENING",     co:"Dubai brokerage · 30 broker headcount" },
    { x:"22%", y:"66%", cls:"warm",  tag:"AML FINE IN THE PRESS",      co:"Regional title insurer · $1.4M penalty" },
    { x:"78%", y:"66%", cls:"match", tag:"NO CLOSING SOFTWARE",        co:"Title + closing co · contracts in Word + email" },
    { x:"50%", y:"86%", cls:"hot",   tag:"BROKERAGE M&A · HEADCOUNT",  co:"Multi-state combination · doubled transaction load" },
  ];
  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 deal-team signals</span>
        <span className="v">142</span>
        <span className="s">↑ 18 new this week</span>
      </div>
      {nodes.map((n,i) => (
        <div key={i} className={"signal-node " + n.cls} style={{left:n.x, top:n.y}}>
          <span className="ndot"></span>
          <div className="nbody">
            <span className="ntag">{n.tag}</span>
            <span className="nco">{n.co}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function PhaseDetect() {
  const sources = [
    { lbl:"Job postings · GC / compliance officer / paralegal", val:"Transaction load outrunning the team in the JD" },
    { lbl:"FinCEN GTO + AML enforcement actions",         val:"Regulators forcing compliance investment now" },
    { lbl:"Brokerage M&A + multi-state combinations",     val:"Doubled volume on the same compliance team" },
    { lbl:"Tech-stack detection · KYC + closing software",val:"Deals tracked in Word + email, no closing OS" },
    { lbl:"Senior partner hires at RE law firms",         val:"Transactional practice scaling, paperwork too" },
    { lbl:"NAR · Inman Connect · MIPIM · Cityscape Dubai",val:"Conference rosters carry buying intent windows" },
  ];
  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: brokerage owners and law firm managing partners get the A track; office 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's role, recent activity, and the signal that triggered the touch (a GC hire, an AML fine in the press, a new-market office). 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">{p.desc}</div>
          <div className="ofeats">
            {p.feats.map((f,j) => <div key={j} className="ofeat">{f}</div>)}
          </div>
          <div className="ostats">
            {p.stats.map((s,j) => (
              <div key={j} className="ostat">
                <span className="v">{s.v}</span>
                <span className="l">{s.l}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

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

function ReplyAgentCard() {
  return (
    <SlackCard time="1:15 PM" subtitle="POSITIVE (Interested)" subtitleDot="#3DDC97" showApprove>
      <div className="slack-status-bar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
        Approved successful
      </div>
      <div className="slack-source-line"><strong>Source:</strong> 🔗 LinkedIn  |  <strong>Routed to:</strong> Vericasa US Rep 1</div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Name:</span>
          <span className="v">Daniel Carrington</span>
          <span className="k" style={{marginTop:6}}>Job Title:</span>
          <span className="v">Managing Broker / Owner</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Carrington Realty · 142 agents · TX + FL</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">dan@carringtonrealty.example</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">LI | FinCEN GTO expansion | Brokerage owners</span>
        </div>
      </div>
      <div className="slack-pill"><span className="pdot"></span>Posted GC / compliance officer role 12 days ago</div>
      <div className="slack-block">
        <span className="lbl">Last Reply:</span>
        <span className="val">FinCEN expanding the GTO into Texas means every all-cash deal on our 142-agent platform now has a reporting hook we don&rsquo;t have a workflow for. We&rsquo;re running KYC out of a shared spreadsheet between two paralegals. What does an actual ten-second turnaround look like on a deal file we&rsquo;d send you?</span>
      </div>
      <div className="slack-block">
        <span className="lbl">Generated Response:</span>
        <span className="val">Dan, KYC plus AML plus title-package draft on a real all-cash deal file, end to end in ten seconds, is exactly the screen we&rsquo;d walk on a call. Brokerages your size run their GTO-state deals through Vericasa with the agent handling the reporting and the paralegals reviewing rather than typing. I have Tuesday 2:30 or Thursday 11 Eastern. Send me a sanitized file and we&rsquo;ll run it live.</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>Holloway &amp; Reed PLLC | Sarah Holloway</strong> · <span style={{color:"#A8AFC0"}}>Demo Held · Stage: Trial pending</span>
      </div>
      <div style={{fontSize:12,color:"#A8AFC0",marginBottom:10}}>Recommended for: Vericasa US Rep 2</div>
      <div className="slack-source-line">
        <strong>Source:</strong> CRM · <strong>Run:</strong> AICRO Rounds · Mon May 18
      </div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Contact:</span>
          <span className="v">Sarah Holloway</span>
          <span className="k" style={{marginTop:6}}>Title:</span>
          <span className="v">Managing Partner · Real Estate</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">s.holloway@hr-law.example</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Holloway &amp; Reed · 22 attorneys · TX + AZ</span>
        </div>
      </div>
      <div className="slack-engagement">
        <div className="slack-engagement-head">📊 Engagement</div>
        <div className="slack-engagement-line">• Last meaningful activity: <strong>14d ago</strong></div>
        <div className="slack-engagement-line">• 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}}>📞 TODAY · PHONE → Sarah Holloway (+1 ###-###-####)</span>
      </div>
      <div className="slack-quote">
        Sarah, Rounds flagged your account. You saw the Vericasa demo on May 4 and haven&rsquo;t spun up the trial yet. Give me 15 minutes to run a real residential closing file through the agent end to end. Holloway &amp; Reed bills six paralegal hours per file on KYC and contract drafting alone, the agent collapses it to one. Tuesday or Wednesday?
      </div>
      <div className="slack-callout">📞 If voicemail: Sarah, following up on the May 4 demo. Texting you a 90-second clip of the agent running a sanitized closing file 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. 22-attorney firm running residential closings means the agent value compounds across every transaction at once.
      </div>
      <div className="slack-signals">
        <span className="sl">Signals observed:</span>
        <ul>
          <li>Vericasa demo held May 4, 14 days ago, no trial activation in CRM</li>
          <li>22 attorneys across TX + AZ, both states with current FinCEN GTO exposure</li>
          <li>Posted 2 paralegal roles last quarter, manual closing work at capacity</li>
        </ul>
      </div>
      <div className="slack-actions">
        <span className="slack-action">View Deal</span>
        <span className="slack-action success">✓ Handled</span>
        <span className="slack-action">📊 Show 3 similar wins</span>
        <span className="slack-action">↻ Try another angle</span>
        <span className="slack-action">💡 Why this priority?</span>
        <span className="slack-action danger">Not relevant</span>
      </div>
    </SlackCard>
  );
}

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

// ─── Phase 4 — Compound ─────────────────
function PhaseCompound() {
  const cards = [
    { l:"CAC", v:"−54%", d:"vs in-house SDR + manager" },
    { l:"Demo → trial activation", v:"+118%", d:"AICRO Rounds + Reply Agent" },
    { l:"Net-new operators in pipeline", v:"3.2×", d:"signal coverage uplift" },
    { l:"Time to insight", v:"−72%", d:"signal → action" },
  ];
  return (
    <div>
      <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:14,marginBottom:18}}>
        {cards.map((c,i) => (
          <div key={i} className="card" style={{padding:22}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:8}}>{c.l}</div>
            <div style={{fontSize:32,fontWeight:600,color:"var(--mint-deep)",letterSpacing:"-0.02em",lineHeight:1}}>{c.v}</div>
            <div style={{fontSize:12,color:"var(--slate-500)",marginTop:6}}>{c.d}</div>
          </div>
        ))}
      </div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
        <div className="card" style={{padding:24}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:10}}>Cadence</div>
          <h3 style={{marginBottom:8,fontSize:18}}>Monday: signal review with Henrik.<br/>Friday: pipeline MBR.<br/>Quarterly: next funding round pipeline math.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Doug walks the room weekly. Every reply, every demo booked, every customer 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-won operators 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:"GC and compliance hires, FinCEN GTO + AML enforcement actions, brokerage M&A combinations, closing-software stack gaps, transactional partner hires at RE law firms, and the NAR + Inman + MIPIM + Cityscape Dubai conference rosters. The signal map fires when a desk is feeling the exact pain Vericasa solves: KYC, AML, due diligence, and contract drafting eating paralegal time 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 reps.",
      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 Vericasa rep in Slack. Demo-held-no-trial is a daily Rounds query. Your Vericasa team handles the agent walkthrough and sanitized file run once it lands.",
      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 customer you close sharpens the seed list. Closed-won profiles feed back as lookalikes by desk-type and geo, so the signal gets more accurate every month. The 68th, 80th, and 120th customers are easier to find than the first 67 ever were. Monday&rsquo;s signal review becomes the next strategic-investor 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">07 / 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} · {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}}>{p.body}</p>
            </div>
            <Body/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── ICP DATA — segment switcher ─────────────
const ICP_DATA = {
  brokerage_owners: {
    label: "Independent Brokerage Owners",
    sub: "US + UAE · 50-500 agent platforms",
    summary: "Brokerage owners booking demos within the week.",
    summaryBody: "Independent brokerage owners running 50 to 500-agent platforms in the US and UAE are the strongest pool. The opener that converts is the FinCEN GTO expansion plus a recent GC or compliance-officer hire on LinkedIn, a team that suddenly has reporting exposure and no closing OS. A managing broker at a 142-agent Texas brokerage replied within hours of a signal-triggered LinkedIn DM. Illustrative of how the beachhead pool runs in the first 60 days.",
    kpis: { sent:"18,420", positives:"94", meetings:"22", pipeline:"31 desks in play", revenue:"3 trials" },
    deltas: { sent:"+24% last 30d", positives:"+62% last 30d", meetings:"+57% last 30d", pipeline:"+148% last 30d", revenue:"+2 last 30d" },
    ratio: "196:1",
    campaigns: [
      { type:"em", name:"EM | FinCEN GTO expansion | Brokerage Owners · TX + FL", sent:"4,820", contacted:"3,140", connReq:"-", connAcc:"-", positives:"38", posRate:"28.4%", accept:"-" },
      { type:"li", name:"LI | Managing Broker | 50-500 Agent Independents", sent:"312", contacted:"264", connReq:"264", connAcc:"122", positives:"24", posRate:"61.1%", accept:"46.2%", active:true },
      { type:"em", name:"EM | GC + compliance hire signal | Brokerage Owners", sent:"3,240", contacted:"2,118", connReq:"-", connAcc:"-", positives:"18", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Owner-Operators | UAE Dubai + Abu Dhabi Brokerages", sent:"148", contacted:"122", connReq:"122", connAcc:"58", positives:"10", posRate:"52.6%", accept:"47.5%" },
      { type:"em", name:"EM | Brokerage M&A · headcount jump | Multi-State", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"4", posRate:"19.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | Managing Broker | 50-500 Agent Independents",
      replies: 39, posPct: 61.5, neuPct: 38.5,
      funnel: [
        { stage:"Connection Requests", val:312, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:264, w:84, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"84.6%" },
        { stage:"Accepted", val:122, w:39, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"46.2%" },
        { stage:"Replied", val:39, w:14, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"32.0%" },
        { stage:"Positive", val:24, w:9, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"61.5%" },
        { stage:"Meetings", val:11, w:5, color:"#0E9F66", pct:"45.8%" },
        { stage:"Trials", val:3, w:3, color:"#0E9F66", pct:"3 active" },
        { stage:"Closed Won", val:1, w:2, color:"#0E9F66", pct:"1 paid" },
      ],
      recent: [
        { name:"Daniel Carrington · 142-agent TX brokerage owner", date:"May 18", tag:"Trial Activated", booked:true },
        { name:"Lina Mansour · Dubai 60-agent brokerage · COO", date:"May 17", tag:"Demo Booked", booked:true },
        { name:"Maria Velez · multi-state FL brokerage · 88 agents", date:"May 16", tag:"Interested" },
        { name:"Brett Coleman · AZ brokerage owner · M&A integrating", date:"May 15", tag:"Demo Booked", booked:true },
        { name:"Sofie Khan · GA + SC brokerage · 110 agents", date:"May 14", tag:"Interested" },
        { name:"Reza Karimi · Abu Dhabi brokerage owner", date:"May 13", tag:"Interested" },
        { name:"Marcus Pace · CO brokerage · 70 agents", date:"May 12", tag:"Interested" },
      ],
    },
  },
  real_estate_law_firms: {
    label: "Real Estate Law Firms",
    sub: "Transactional partners · US + EU",
    summary: "Managing partners responding to paralegal-hours angle.",
    summaryBody: "Real estate law firms with 10 to 60 attorneys running residential and commercial closings, where KYC, AML, and contract drafting eat 4 to 6 paralegal hours per file. The opener is FinCEN GTO state exposure plus a recent paralegal or compliance-counsel hire. Rodolfo's peer audience. Managing partners and heads of real estate practice are the right title tier. Illustrative pool projection.",
    kpis: { sent:"6,140", positives:"28", meetings:"6", pipeline:"11 firms in play", revenue:"1 trial" },
    deltas: { sent:"+18% last 30d", positives:"+44% last 30d", meetings:"+50% last 30d", pipeline:"+87% last 30d", revenue:"+1 last 30d" },
    ratio: "219:1",
    campaigns: [
      { type:"em", name:"EM | FinCEN GTO + paralegal hiring | RE Law Firms", sent:"2,140", contacted:"1,388", connReq:"-", connAcc:"-", positives:"14", posRate:"24.0%", accept:"-" },
      { type:"li", name:"LI | Managing Partner | RE Law · 20-60 Attorneys", sent:"148", contacted:"112", connReq:"112", connAcc:"48", positives:"8", posRate:"52.9%", accept:"42.9%", active:true },
      { type:"em", name:"EM | Closing-volume jump | Multi-State Practices", sent:"1,820", contacted:"1,124", connReq:"-", connAcc:"-", positives:"6", posRate:"19.4%", accept:"-" },
    ],
    drawer: {
      name: "LI | Managing Partner | RE Law · 20-60 Attorneys",
      replies: 15, posPct: 53.3, neuPct: 46.7,
      funnel: [
        { stage:"Connection Requests", val:148, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:112, w:76, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"75.7%" },
        { stage:"Accepted", val:48, w:32, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"42.9%" },
        { stage:"Replied", val:15, w:10, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"31.3%" },
        { stage:"Positive", val:8, w:5, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"53.3%" },
        { stage:"Meetings", val:3, w:2, color:"#0E9F66", pct:"37.5%" },
        { stage:"Trials", val:1, w:2, color:"#0E9F66", pct:"1 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Sarah Holloway · 22-attorney TX + AZ RE practice · MP", date:"May 18", tag:"Demo Booked", booked:true },
        { name:"Priya Anand · NY commercial-RE law · 40 attorneys", date:"May 16", tag:"Interested" },
        { name:"Dale Foster · independent FL closing-attorney firm", date:"May 14", tag:"Interested" },
        { name:"Nadia Cole · DACH transactional-RE practice · 28 attys", date:"May 13", tag:"Demo Booked", booked:true },
      ],
    },
  },
  title_notary_closing: {
    label: "Title / Notary / Closing Cos",
    sub: "US transaction closers · regional",
    summary: "Title-co COOs responding to per-file labor-cost angle.",
    summaryBody: "Regional title companies, notary closing groups, and independent closing platforms running 200 to 2,000 monthly closings, where the entire P&L is gated by per-file paralegal and processor hours. The trigger is an AML enforcement action in the press plus a closing-software stack gap (CRM only, no agent layer). COOs and operations heads are the right title tier. Illustrative pool projection.",
    kpis: { sent:"5,420", positives:"22", meetings:"5", pipeline:"9 firms in play", revenue:"1 trial" },
    deltas: { sent:"+16% last 30d", positives:"+36% last 30d", meetings:"+25% last 30d", pipeline:"+92% last 30d", revenue:"+1 last 30d" },
    ratio: "246:1",
    campaigns: [
      { type:"em", name:"EM | AML fine + per-file cost | Regional Title Cos", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"10", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | COO / Ops Head | Regional Title · 200-2K closings/mo", sent:"148", contacted:"122", connReq:"122", connAcc:"54", positives:"8", posRate:"58.3%", accept:"44.3%", active:true },
      { type:"em", name:"EM | Closing-volume jump · multi-county | Notary Groups", sent:"1,420", contacted:"918", connReq:"-", connAcc:"-", positives:"4", posRate:"21.1%", accept:"-" },
    ],
    drawer: {
      name: "LI | COO / Ops Head | Regional Title · 200-2K closings/mo",
      replies: 14, posPct: 57.1, neuPct: 42.9,
      funnel: [
        { stage:"Connection Requests", val:148, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:122, w:82, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"82.4%" },
        { stage:"Accepted", val:54, w:36, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"44.3%" },
        { stage:"Replied", val:14, w:9, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"25.9%" },
        { stage:"Positive", val:8, w:5, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"57.1%" },
        { stage:"Meetings", val:3, w:2, color:"#0E9F66", pct:"37.5%" },
        { stage:"Trials", val:1, w:1, color:"#0E9F66", pct:"1 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Elin Ross · COO · 5-county TX title platform", date:"May 18", tag:"Demo Booked", booked:true },
        { name:"Sanjay Mehta · independent CA closing co · ops head", date:"May 16", tag:"Interested" },
        { name:"Grace Holloway · GA notary closing group · 12 closers", date:"May 15", tag:"Interested" },
        { name:"Viktor Salas · multi-state title platform · 1,200 closings/mo", date:"May 13", tag:"Trial Activated", booked:true },
      ],
    },
  },
  developers_operators: {
    label: "Mid-Market Developers",
    sub: "Active acquisition · multi-asset",
    summary: "GCs and acquisitions heads responding to multi-deal compliance angle.",
    summaryBody: "Mid-market developers and owner-operators in active acquisition mode, running 5 to 30 deals a year, where every closing has its own compliance lift. The message leads with the multi-deal-per-quarter wedge, one agent across KYC, AML, and contract drafting for every site. GCs, in-house transactional counsel, and heads of acquisitions are the title tier. Illustrative pool projection.",
    kpis: { sent:"8,820", positives:"42", meetings:"9", pipeline:"16 firms in play", revenue:"2 trials" },
    deltas: { sent:"+22% last 30d", positives:"+58% last 30d", meetings:"+80% last 30d", pipeline:"+124% last 30d", revenue:"+2 last 30d" },
    ratio: "210:1",
    campaigns: [
      { type:"em", name:"EM | Multi-deal compliance | US Developers · 5-30 deals/yr", sent:"3,140", contacted:"2,018", connReq:"-", connAcc:"-", positives:"22", posRate:"26.4%", accept:"-" },
      { type:"li", name:"LI | GC / In-house Counsel | Mid-Market Developers", sent:"212", contacted:"180", connReq:"180", connAcc:"82", positives:"14", posRate:"56.0%", accept:"45.6%", active:true },
      { type:"em", name:"EM | New UAE office signal | EU Developers", sent:"2,420", contacted:"1,612", connReq:"-", connAcc:"-", positives:"6", posRate:"22.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | GC / In-house Counsel | Mid-Market Developers",
      replies: 25, posPct: 56.0, neuPct: 44.0,
      funnel: [
        { stage:"Connection Requests", val:212, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:180, w:85, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"84.9%" },
        { stage:"Accepted", val:82, w:39, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"45.6%" },
        { stage:"Replied", val:25, w:12, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"30.5%" },
        { stage:"Positive", val:14, w:7, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"56.0%" },
        { stage:"Meetings", val:5, w:3, color:"#0E9F66", pct:"35.7%" },
        { stage:"Trials", val:2, w:2, color:"#0E9F66", pct:"2 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Tara Nguyen · US industrial developer · GC", date:"May 18", tag:"Trial Activated", booked:true },
        { name:"Beau Carter · multifamily developer · TX + AZ", date:"May 17", tag:"Demo Booked", booked:true },
        { name:"Imani Clarke · multi-asset owner-operator · FL", date:"May 15", tag:"Interested" },
        { name:"Felipe Duarte · acquisitions head · UAE developer", date:"May 14", tag:"Interested" },
      ],
    },
  },
};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

function ClientPortalScreenshots() {
  const shots = [
    {
      src: "uploads/pasted-1777222339189-0.png",
      label: "Executive Summary",
      caption: "Last 30 days. Email plus LinkedIn side by side, weekly positive replies, every campaign with full funnel. The view you open every Monday.",
    },
    {
      src: "uploads/pasted-1777222392601-0.png",
      label: "Campaign Drawer",
      caption: "Click any active campaign to drill in. Full funnel: connection requests, accepted, replied, positive, demo, trial activated. Live AICRO portal; the pool numbers shown are illustrative for Vericasa's segments.",
    },
    {
      src: "uploads/pasted-1777222050657-0.png",
      label: "Reply Agent · live in Slack",
      caption: "A brokerage owner's reply hits Slack immediately, classified positive, response drafted, demo booked. A Vericasa rep approves before send.",
    },
    {
      src: "uploads/pasted-1777222220819-0.png",
      label: "Sales Action · AICRO Rounds",
      caption: "A 22-attorney US real estate practice saw the demo 14 days ago, no trial activation. AICRO Rounds grades it Grade A, recommends the rep, and writes the script.",
    },
  ];
  return (
    <section className="section section-soft" id="portal-screenshots">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">09 / The four screens</span>
          <h2>The four screens you live in.</h2>
          <p>Monday summary, campaign drill-in, Slack reply agent, sales action card. Real data, anonymized.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24,marginTop:32}}>
          {shots.map((s,i) => (
            <div key={i} style={{
              background:"var(--white,#fff)",
              border:"1px solid var(--mist,#E2E8F0)",
              borderRadius:14,
              overflow:"hidden",
              boxShadow:"0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06)",
            }}>
              <div style={{
                padding:"10px 16px",
                background:"var(--cloud,#F1F5F9)",
                borderBottom:"1px solid var(--mist,#E2E8F0)",
                display:"flex",
                alignItems:"center",
                gap:10,
              }}>
                <span style={{width:8,height:8,borderRadius:"50%",background:"#21A8F2"}}></span>
                <span style={{
                  fontFamily:"'JetBrains Mono',monospace",
                  fontSize:10,
                  letterSpacing:"0.12em",
                  color:"var(--slate-700,#334155)",
                  fontWeight:600,
                  textTransform:"uppercase",
                }}>{s.label}</span>
              </div>
              <img src={s.src} alt={s.label} style={{display:"block",width:"100%",height:"auto"}}/>
              <div style={{padding:"14px 18px",fontSize:13,color:"var(--slate-500,#64748B)",lineHeight:1.55}}>
                {s.caption}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClientPortalSection({ icp, setIcp }) {
  return (
    <section className="section section-dark" id="portal">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow" style={{color:"rgba(255,255,255,.5)"}}>08 / Flagship</span>
          <h2>The Client Portal you operate from.</h2>
          <p style={{color:"rgba(255,255,255,.6)"}}>
            One pane of glass, every Monday. Vericasa&rsquo;s pipeline, replies, and every campaign with its full funnel, in a single view.
          </p>
        </div>
        <ClientPortalV2 icp={icp}/>
      </div>
    </section>
  );
}

// ─── CRO Stack ─────────────────
function CROStack() {
  const modules = [
    { l:"Strategy", t:"ICP & Signal Map", d:"4 desk-type pools (brokerage owners, RE law firms, title/notary, developers) across US + UAE + EU. 6 signal layers that fire when a desk needs Vericasa. Quarterly refresh tuned against the profiles that convert.", delivs:["4 desk-type ICP cards","6-source signal architecture","Pool-concentration scorecard","Quarterly recalibration"] },
    { l:"Playbooks", t:"Productized SOPs", d:"Discovery scripts and demo flows for brokerage owners, transactional law partners, title COOs, and developer GCs. ROI framing: paralegal-hours-per-file to ten-second turnaround. Horizontal closing-OS positioning vs single-task KYC vendors.", delivs:["Discovery script · per desk-type","Demo flow + ROI walkthrough","Positioning battlecards","Onboarding checklist"] },
    { l:"Comp", t:"Rep Comp Structure", d:"New-logo accelerators tuned to Vericasa&rsquo;s SaaS model. Trial-to-paid SPIFF. Override design for the US sales bench you hire next.", delivs:["Ramp plan · 90/180/365","Trial activation SPIFF","New-logo accelerator","Investor-defendable model"] },
    { l:"Onboarding", t:"Operator Cadence", d:"Monday signal review with Rodolfo and Phil. Wednesday reply triage. Friday MBR. Quarterly next-investor pipeline math run in your Slack.", delivs:["Monday signal review","Wednesday reply triage","Friday MBR","QBR + investor pack"] },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">10 / The CRO Stack</span>
          <h2>One operator-built system. Run by people who&rsquo;ve sold this buyer.</h2>
          <p>You&rsquo;ve built the product and the customers love it. What you need next is a proven motion to acquire net-new brokerage owners, transaction-law partners, title operators, and developer GCs at volume. Strategy, playbooks, comp design, and onboarding, run as one system.</p>
        </div>
        <div className="cro-stack">
          <div className="cro-tree">
            <div className="cro-node lead">
              <span className="role">Fractional CRO · Doug Shankman</span>
              <span className="name">15+ yrs CRO · PropTech operator · CREXi, Pacaso, Hemlane lineage</span>
            </div>
            <div className="cro-children">
              <div className="cro-node">
                <span className="role">Revenue Strategist</span>
                <span className="name">Pipeline math, comp, board prep</span>
              </div>
              <div className="cro-node">
                <span className="role">Signal Architect</span>
                <span className="name">ICP, 6-source signal map, intent</span>
              </div>
              <div className="cro-node">
                <span className="role">Outbound Operator</span>
                <span className="name">Daily campaign management</span>
              </div>
              <div className="cro-node">
                <span className="role">RevOps Engineer</span>
                <span className="name">HubSpot build, agent deploy, data</span>
              </div>
              <div className="cro-node">
                <span className="role">Enablement Lead</span>
                <span className="name">Playbooks, deal coaching</span>
              </div>
            </div>
          </div>
          <div className="cro-modules">
            {modules.map((m,i) => (
              <div className="cro-mod" key={i}>
                <span className="mlbl">{m.l}</span>
                <span className="mtitle">{m.t}</span>
                <span className="mdesc">{m.d}</span>
                <ul className="mdelivs">
                  {m.delivs.map((d,j) => <li key={j}>{d}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Economics — $10K POC ─────────────────
function CostCompare() {
  return (
    <section className="section section-soft" id="economics">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">11 / Economics</span>
          <h2>$10,000 / month. Three months. Demos in 30 to 45 days.</h2>
          <p>One number. One commitment window. Same outcome target as the US sales hire plus tooling build, at a fraction of the time and cost.</p>
        </div>
        <div className="cost-grid">
          <div className="cost-card">
            <div className="cost-eyebrow">Build the demand engine yourself</div>
            <h3>2 SDRs + demand-gen lead + tools.</h3>
            <p style={{color:"var(--slate-500)",fontSize:14,marginTop:6}}>9 to 12 months to first repeatable pipeline.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">2 SDRs + demand-gen lead (loaded)</span><span className="val">$280 to $360K</span></div>
              <div className="cost-list-row"><span className="label">Founder oversight (Rodolfo + Phil)</span><span className="val">$120K opportunity cost</span></div>
              <div className="cost-list-row"><span className="label">Tool stack (5 to 7 logos)</span><span className="val">$30 to $50K</span></div>
              <div className="cost-list-row"><span className="label">Time to first repeatable pipeline</span><span className="val">9 to 12 months</span></div>
              <div className="cost-list-row total"><span className="label">Year 1 commitment</span><span className="val">$430 to $530K</span></div>
            </div>
            <div className="cost-meta">9 to 12 months and a new layer of management before you know if the build works.</div>
          </div>
          <div className="cost-card aicro">
            <div className="cost-eyebrow">AICRO · 3-month POC</div>
            <h3>$10,000 / month. Full engine.</h3>
            <p style={{color:"rgba(255,255,255,.65)",fontSize:14,marginTop:6}}>Doug as operator-CRO + delivery team + product platform. One bill.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">Months 1, 2, 3 (POC)</span><span className="val">$10,000 / month</span></div>
              <div className="cost-list-row"><span className="label">3-month total</span><span className="val">$30,000</span></div>
              <div className="cost-list-row"><span className="label">First booked demos</span><span className="val">Day 30 to 45</span></div>
              <div className="cost-list-row"><span className="label">Demos handed to your reps</span><span className="val">Day 45 onward</span></div>
              <div className="cost-list-row total"><span className="label">Cost vs. in-house Year 1</span><span className="val">~7% of build cost</span></div>
            </div>
            <div className="cost-meta">Time to value is the unit economic that matters here. The 3-month POC delivers four graded desk-type pools (brokerage owners, RE law firms, title/notary, developers), a live signal layer, booked demos on your reps&rsquo; calendars, and a fully-instrumented funnel. The in-house build delivers a US sales team that is still ramping.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Case studies — 5 ─────────────────
function CaseStudies() {
  const cases = [
    {
      co: "RemoteLock",
      stage: "PropTech · same playbook",
      sector: "PropTech · Smart Access SaaS",
      quote: "Smart-access SaaS selling into real estate operators. RemoteLock proves the AICRO RE outbound discipline: operator-to-operator messaging that gets named groups like Greystar and Namdar replying. The end-buyer differs from Vericasa&rsquo;s brokerage owners and law partners, but the cold-RE muscle and inbox response patterns transfer directly.",
      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: "Adjacent buyer", l: "to Propstreet" },
        { 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. Same shape as Vericasa: an AI-native deal-flow product with product-market fit 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 Vericasa", 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: "2×", l: "conversion" },
        { v: "3.5×", 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 → 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">12 / Proof</span>
          <h2>We&rsquo;ve taken AI and PropTech to market in real estate. 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 PropTech product in front of the brokerages, law firms, and developers who actually move. Henry AI and RemoteLock are the closest reads on Vericasa.</p>
        </div>
        <div className="cs-grid" style={{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:18}}>
          {cases.map((c,i) => (
            <div className="cs-card" key={i}>
              <div className="cs-head">
                <div>
                  <div className="cs-co">{c.co}</div>
                  <div style={{fontSize:12,color:"var(--slate-500)",marginTop:2}}>{c.sector}</div>
                </div>
                <span className="cs-stage">{c.stage}</span>
              </div>
              <div className="cs-body">
                <p className="cs-quote">{c.quote}</p>
                <div className="cs-attr">{c.attr}</div>
                <div className="cs-systems">
                  <span className="cs-systems-lbl">Systems delivered</span>
                  {c.systems.map((s,j) => <div className="cs-system" key={j}>{s}</div>)}
                </div>
              </div>
              <div className="cs-metrics">
                {c.metrics.map((m,j) => (
                  <div className="cs-metric" key={j}>
                    <span className={"v " + (m.live ? "live" : "")}>{m.v}</span>
                    <span className="l">{m.l}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 90-day Gantt ─────────────────
function NinetyDay() {
  const workstreams = [
    {
      name: "ICP & Signal architecture",
      desc: "4-segment map · 6 signal sources · daily refresh",
      bars: [
        { left: 0, width: 14, label: "ICP + SIGNAL BUILD", cls: "amber" },
        { left: 14, width: 86, label: "GRADED OUTPUT FEEDS LIVE CAMPAIGNS", cls: "sky" },
      ],
      delivs: [
        { left: 7, label: "Day 7 · ICP locked" },
        { left: 14, label: "Day 14 · signals live" },
        { left: 50, label: "Day 60 · refresh" },
      ],
    },
    {
      name: "AICRO Send · Email Engine",
      desc: "75 warmed inboxes · operator-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 + Vericasa principals (Rodolfo / Phil, with consent)",
      bars: [
        { left: 0, width: 8, label: "PROFILE SETUP", cls: "amber" },
        { left: 8, width: 92, label: "MULTI-SEAT CONNECT + INMAIL CAMPAIGNS", cls: "sky" },
      ],
      delivs: [
        { left: 6, label: "Day 7 · connected" },
        { left: 22, label: "Day 21 · campaign" },
        { left: 50, label: "Day 60 · 45%+" },
      ],
    },
    {
      name: "CRO + Reply Triage",
      desc: "Operator in the room weekly · Reply Agent triages every reply",
      bars: [
        { left: 0, width: 100, label: "OPERATOR IN THE ROOM · WEEKLY", cls: "shark" },
      ],
      delivs: [
        { left: 12, label: "Day 12 · pipeline" },
        { left: 50, label: "Day 50 · comp" },
        { left: 88, label: "Day 88 · QBR" },
      ],
    },
  ];
  return (
    <section className="section section-soft" id="timeline">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">13 / The 90-day build</span>
          <h2>Day 1 to Day 90, in deliverables you can hold.</h2>
          <p>Email and LinkedIn engines run in parallel under one operator. Every milestone is a shipped artifact, not a status update.</p>
        </div>
        <div className="gantt">
          <div className="gantt-head">
            <div className="col workstream">Workstream</div>
            <div className="col">Day 1<span className="day">Kickoff</span></div>
            <div className="col">Day 30<span className="day">First demos</span></div>
            <div className="col">Day 60<span className="day">Compounding</span></div>
            <div className="col">Day 90<span className="day">QBR</span></div>
          </div>
          {workstreams.map((w, i) => (
            <div className="gantt-row" key={i}>
              <div className="gantt-ws">
                <div className="name">{w.name}</div>
                <div className="desc">{w.desc}</div>
              </div>
              <div className="gantt-track">
                {w.bars.map((b, j) => (
                  <div key={j} className={"gantt-bar " + b.cls} style={{left:b.left+"%", width:b.width+"%"}}>{b.label}</div>
                ))}
                {w.delivs.map((d, j) => (
                  <div key={j} className="gantt-deliv" style={{left:d.left+"%", bottom: j % 2 ? 30 : 8}}>
                    <span className="pin"></span>{d.label}
                  </div>
                ))}
              </div>
            </div>
          ))}
          <div className="gantt-foot">
            <div className="gantt-legend"><span className="sw" style={{background:"linear-gradient(90deg,#21A8F2,#0E7DBC)"}}></span>Live execution</div>
            <div className="gantt-legend"><span className="sw" style={{background:"#1C1C24"}}></span>Continuous CRO ownership</div>
            <div className="gantt-legend"><span className="sw" style={{background:"#D97706"}}></span>Build / deploy</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CTA — custom demo via Calendly ─────────────
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)"}}>14 / Custom demo + Q&amp;A</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>Rodolfo, the custom demo is built. Let&rsquo;s walk it together.</h2>
            <p>We&rsquo;ve already built the Vericasa instance. The orchestration layer is live: four desk-type pools graded (brokerage owners, RE law firms, title/notary, developers), signals firing across US, UAE, and EU geos, sample operator-to-operator sequences ready. We&rsquo;d rather walk you through it for 30 minutes than send another email. Pick a slot below and we&rsquo;ll run it live, take your questions, and you decide whether the next 90 days are with us.</p>
            <div style={{marginTop:32,display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
              <a href="https://calendly.com/doug-aicro/custom-demo-qa"
                 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 the custom demo + Q&amp;A →
              </a>
              <span style={{fontSize:13,color:"rgba(255,255,255,0.65)",lineHeight:1.5,flex:1,minWidth:280}}>
                30-minute live walkthrough on Calendly. No deck, no slides. The orchestration layer running in your tab against the four desk-type pools. You see what we&rsquo;d send to a brokerage owner, a managing partner at an RE law firm, a title-co COO, and a developer GC on day one.
              </span>
            </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/custom-demo-qa
            </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">VERICASA · PROPOSAL · 2026-05-25</span>
      </div>
      <div>doug@aicro.co</div>
      <div className="footer-meta">© 2026 AICRO · Doug Shankman & Josh Kulchin, Co-Founders</div>
    </footer>
  );
}

// ─── Section: Prospect Universe ─────────────────────────────────────
function ProspectUniverse() {
  const verticals = [
    { v:"Independent Brokerage Owners", stat:"106K+", statLbl:"US independent RE offices", frag:"NAR counts 106,000+ independent brokerage offices in the US, plus a fast-consolidating UAE pool around Dubai and Abu Dhabi. Owners of 50 to 500-agent platforms feel transaction-compliance friction first as FinCEN expands.", buyer:"Managing Broker / Owner-Operator" },
    { v:"Real Estate Law Firms", stat:"40K+", statLbl:"US transactional RE practices", frag:"Tens of thousands of US real estate practices, plus the EU peer firms Rodolfo already knows by name. Every residential and commercial closing eats 4 to 6 paralegal hours on KYC, AML, and contract drafting.", buyer:"Managing Partner / Real Estate Practice Head" },
    { v:"Title / Notary / Closing Cos", stat:"5,400+", statLbl:"US title + closing platforms", frag:"Regional title companies, notary closing groups, and independent closing platforms run 200 to 2,000 closings a month. Every file is a labor-cost line. Closing software is mostly CRM, not agent.", buyer:"COO / Operations Head" },
    { v:"Mid-Market Developers", stat:"12K+", statLbl:"US + UAE acquisition-minded developers", frag:"Multi-asset developers and owner-operators running 5 to 30 deals a year, each carrying its own KYC and closing lift. Most still track compliance across email threads and Word documents.", buyer:"General Counsel / Head of Acquisitions" },
  ];
  return (
    <section className="section" id="universe">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>03 / Your prospect universe</span>
          <h2>We mapped the market you sell into.</h2>
          <p>Before a single email goes out, here is the buyer universe Vericasa can win across the US, the UAE, and the EU. It is large and it is fragmented, which is exactly why an outbound engine compounds rather than saturates.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:18}}>
          {verticals.map((d,i) => (
            <div key={i} className="card" style={{padding:26,display:"flex",flexDirection:"column",gap:12}}>
              <div style={{fontSize:15,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em"}}>{d.v}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:12,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:34,fontWeight:600,letterSpacing:"-0.02em",color:"#21A8F2",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.05em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <p style={{fontSize:13,color:"var(--slate-500)",lineHeight:1.6,margin:0}}>{d.frag}</p>
              <div style={{marginTop:"auto",paddingTop:10,fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>
                <span style={{color:"var(--slate-400)"}}>BUYER · </span>{d.buyer}
              </div>
            </div>
          ))}
          <div className="card" style={{padding:26,background:"var(--shark)",display:"flex",flexDirection:"column",justifyContent:"center",gap:10}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600}}>The opportunity</div>
            <div style={{fontSize:15,lineHeight:1.55,color:"#fff",fontWeight:500}}>
              Hundreds of thousands of US, UAE, and EU brokerage owners, RE law partners, title-co operators, and developer GCs, leaner than their deal flow, drafting contracts and KYC packages in Word and Outlook. They will not all find Vericasa on their own. That gap is the list we build, prioritize, and work every week.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section: A-Tier Targets · Why Now ─────────────────────────────────────
function ATierTargets() {
  const targets = [
    { co:"Engel & Völkers Americas", vert:"Independent Brokerage Owners", size:"US franchise + corporate · 1,000+ agents", why:"Active US expansion build-out with continuous franchise-owner recruiting and a corporate compliance layer that has to scale to every market they enter.", angle:"A corporate compliance lead supporting hundreds of franchise owners is the buyer for an agent that runs KYC and contract drafting under every desk simultaneously." },
    { co:"Side, Inc.", vert:"Independent Brokerage Owners", size:"US · 3,000+ agents · brokerage-as-a-service", why:"Powering independent brokerages on a tech-first platform, actively hiring brokerage operations and compliance roles across geographies.", angle:"A brokerage-as-a-service platform is already paying for closing infrastructure on behalf of its broker customers. The agent slots in as a paid layer that compounds across every customer's deal flow." },
    { co:"Greenberg Traurig · Real Estate", vert:"Real Estate Law Firms", size:"US BigLaw · 600+ RE attorneys", why:"Largest US real estate practice by attorney count. Continuously hiring transactional partners and paralegals across primary markets.", angle:"A 600-attorney practice still bills per-file paralegal hours on KYC and contract drafting. Per-file labor compression at that scale moves the practice P&L." },
    { co:"Holland & Knight · Real Estate", vert:"Real Estate Law Firms", size:"US · 300+ RE attorneys · multi-state", why:"Active real estate transactional practice with current FinCEN GTO state exposure and ongoing paralegal hiring.", angle:"FinCEN GTO state exposure on a multi-state RE practice is more reporting hours than last year's process was built to absorb. Rodolfo's peer audience exactly." },
    { co:"Old Republic Title", vert:"Title / Notary / Closing Cos", size:"US · top-3 underwriter · 4M+ orders/yr", why:"One of the largest US title underwriters running millions of closings annually across a regional agent network. Per-file labor cost is the gating P&L line.", angle:"A top-3 underwriter compounding agent value across millions of orders is a cleaner economic argument than a brokerage one. The cost-per-file delta is large and measurable." },
    { co:"Hines · US Acquisitions", vert:"Mid-Market Developers", size:"Global · $93B AUM · US development arm", why:"Active US acquisitions across multifamily, industrial, and mixed-use. Continuous in-house legal and acquisitions hiring.", angle:"A global developer's US arm runs simultaneous closings across geographies, every one carrying its own compliance lift. One agent across every site is the wedge." },
  ];
  return (
    <section className="section section-soft" id="targets">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">04 / A-tier targets · why now</span>
          <h2>Not a category. A list. Here is who we&rsquo;d open with.</h2>
          <p>A few examples, not the full list. Each firm below carries a real, dated public signal that flags buying intent right now: GC hires, FinCEN GTO state exposure, US expansion build-outs, multi-state combinations. The complete A-list is scored and refreshed weekly once we are live.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:16}}>
          {targets.map((t,i) => (
            <div key={i} className="card" style={{padding:22,display:"flex",flexDirection:"column",gap:12}}>
              <div style={{display:"flex",alignItems:"center",gap:8}}>
                <span style={{padding:"3px 9px",borderRadius:99,background:"#E9F5FE",color:"#0E7DBC",fontFamily:"'JetBrains Mono',monospace",fontSize:9,fontWeight:700,letterSpacing:"0.06em",textTransform:"uppercase"}}>{t.vert}</span>
              </div>
              <div>
                <div style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.25}}>{t.co}</div>
                <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",marginTop:3}}>{t.size}</div>
              </div>
              <div style={{borderTop:"1px solid var(--mist)",paddingTop:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>Why now</div>
                <p style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.55,margin:0}}>{t.why}</p>
              </div>
              <div style={{marginTop:"auto"}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"var(--slate-400)",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>The angle</div>
                <p style={{fontSize:12.5,color:"var(--slate-500)",lineHeight:1.55,margin:0,fontStyle:"italic"}}>{t.angle}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{marginTop:20,padding:"18px 24px",background:"#fff",border:"1px solid var(--mist)",borderRadius:12,fontSize:13.5,color:"var(--slate-700)",lineHeight:1.6}}>
          Real firms. Illustrative angles. In week one we turn this into a scored, deduped A-list across all four segments with verified dated public signals (FinCEN GTO actions, GC and compliance hires, brokerage M&A combinations, new-market office openings), refreshed as new signals fire.
        </div>
      </div>
    </section>
  );
}

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

  return (
    <Fragment>
      <Nav/>
      <Hero dark={t.darkHero}/>
      <TrustStrip/>
      <MarketThesis/>
      <Orchestration/>
      <ProspectUniverse/>
      <ATierTargets/>
      <SoftwareImpact/>
      <Matrix/>
      <SignalToScale/>
      <ClientPortalSection icp={t.icp} setIcp={setIcp}/>
      <ClientPortalScreenshots/>
      <CROStack/>
      <CaseStudies/>
      <NinetyDay/>
      <CTA/>
      <Footer/>
      <TweaksPanel>
        <TweakSection label="Surface"/>
        <TweakRadio
          label="Hero treatment"
          value={t.darkHero ? "dark" : "light"}
          options={["dark", "light"]}
          onChange={(v) => setTweak('darkHero', v === "dark")}
        />
        <TweakSection label="Client Portal scenario"/>
        <TweakSelect
          label="Segment"
          value={t.icp}
          options={[
            {value:"brokerage_owners",       label:"Independent Brokerage Owners"},
            {value:"real_estate_law_firms",  label:"Real Estate Law Firms"},
            {value:"title_notary_closing",   label:"Title / Notary / Closing Cos"},
            {value:"developers_operators",   label:"Mid-Market Developers"},
          ]}
          onChange={(v) => setTweak('icp', v)}
        />
        <div style={{fontSize:11,color:"rgba(41,38,27,.55)",lineHeight:1.5,marginTop:6}}>
          The Client Portal re-renders the Executive Summary, KPIs, campaigns table, and drawer for each segment.
        </div>
      </TweaksPanel>
    </Fragment>
  );
}

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