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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "icp": "enterprise_operators",
  "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">Peek Proposal</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">Why now</a>
            <a href="#orchestration">Orchestration</a>
            <a href="#impact">Impact</a>
            <a href="#icp-map">ICP map</a>
            <a href="#cases">Proof</a>
            <a href="#economics">Economics</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 Austin Lo · Peek · June 9, 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          Austin, you built the leasing layer Greystar, Brookfield, and Cortland already run on.<br/>
          The product converts. That is settled.<br/>
          <span style={{color:"#21A8F2"}}>The next constraint is how many of the other 20 million managed units ever see it.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:920}}>
          We found Peek on a multifamily-PropTech scan and then read the customer list. Greystar, Brookfield, Cushman &amp; Wakefield, Related, Cortland, RPM Living. The product is winning the rooms it gets into. Every Peek story is the same shape. A renter opens a 3D unit tour, the AI leasing assistant answers at midnight, the self-guided tour runs without a leasing agent, and an operator who was bleeding vacant days closes the lease faster. The product compounds inside every property that turns it on. The ceiling now is reach, how many of the thousands of US apartment operators, fee-managers, and lease-up teams who have never heard of Peek ever push their units onto it. Here is exactly what AICRO does about that: we run cold, operator-to-operator outbound, email and LinkedIn, that fills your pipeline with net-new multifamily operators, regional VPs, marketing leaders, and lease-up heads. We never touch the leasing product. 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:"~30%", l:"vacancy loss Peek removes · the outcome you sell"},
            {v:"47%", l:"LinkedIn PRR · RemoteLock into multifamily ops"},
            {v:"Greystar", l:"replied to AICRO cold · your customer, our proof"},
            {v:"20M+", l:"US managed units · the pipeline above your install base"},
          ].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 + multifamily-adjacent 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 · THE NUMBER THAT MATTERS",
      stat: "~30%",
      statLbl: "vacancy loss removed · the outcome you sell",
      title: "Vacant days are the only number a multifamily operator counts.",
      body: "Multifamily runs on occupancy, and every vacant day is rent that never comes back. Peek pulls roughly 30% of vacancy loss out of a property and compresses the leasing cycle by about a week per unit through 3D tours, the AI leasing assistant, and self-guided showings. Once a property runs on it, the call-back-on-Monday and tour-with-an-agent version becomes the slow option nobody defends. The product converts. The ceiling is now the number of operators who have never pushed a single unit onto it.",
      source: "Source: Peek · vacancy-loss reduction claim",
    },
    {
      tag: "02 · THE LAND-GRAB WINDOW",
      stat: "20M+",
      statLbl: "professionally managed US apartment units",
      title: "AI leasing is going from experiment to standard. Now is when share gets taken.",
      body: "Greystar, Brookfield, Related, and Cortland came in through relationships and the strength of the product. Those land the marquee names. They do not land the thousands of mid-market operators, fee-managers, and lease-up teams evaluating AI leasing this year. The US has 20M+ professionally managed apartment units across thousands of operators, and the centralized-leasing wave plus pressure on legacy revenue-management tools is pushing every one of them to look at conversion levers right now. Touching them directly, in operator language, is an outbound discipline, not an inbound one.",
      source: "Source: NMHC + Census · professionally managed units",
    },
    {
      tag: "03 · THE BUYER IS REACHABLE",
      stat: "47%",
      statLbl: "LinkedIn PRR to multifamily ops · RemoteLock",
      title: "Multifamily marketing and ops leaders answer when a peer speaks vacancy.",
      body: "VP Marketing, regional VPs, heads of leasing, and SVP Operations at apartment operators answer LinkedIn and email directly when peers, not vendors, reach out. AICRO runs this exact buyer today. At RemoteLock, smart-access SaaS into multifamily, the LinkedIn positive-reply rate hit 47% and a Greystar Sr. Managing Director and the CEO of Namdar Group both replied by name. The same playbook ports to leasing and marketing leadership using a vacancy-and-conversion opener instead of a smart-access one.",
      source: "Source: AICRO · RemoteLock active engagement",
    },
    {
      tag: "04 · YOUR SERIES A DESERVES A MOTION",
      stat: "Repeatable",
      statLbl: "acquisition motion · not a referral chart",
      title: "Your next raise reads better with a repeatable acquisition motion.",
      body: "Capital trades at a premium when the acquisition motion is repeatable, instrumented, and not founder-dependent. Coming off the Series A, Peek's growth is largely founder-led, relationship-driven, and inbound-warm. Install a net-new engine now and the next twelve months show a graded operator universe, a live signal layer, and a booked-demo cadence the team can hand to a sales hire as you scale. The chart that wins the next round is not the marquee logos alone, it is those plus a working machine that fills the calendar every Monday.",
      source: "Source: Peek · Series A, May 2025 (Moneta Ventures)",
    },
  ];
  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 converts. The growth ceiling is reach.</h2>
          <p>Greystar, Brookfield, Related, and Cortland running on Peek is the strongest signal a multifamily leasing product can give. The value Peek creates is now capped by one thing. How many of the thousands of other US operators, fee-managers, and lease-up teams ever push their units onto it. Four forces make closing that gap the highest-leverage move Peek 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}}>What AICRO does, answered before you ask</div>
          <div style={{fontSize:18,lineHeight:1.5,color:"#fff",fontWeight:500,maxWidth:940}}>
            &ldquo;Peek already runs AI that automates leasing, 3D tours, an AI leasing assistant, renter analytics. Aren&rsquo;t you selling me automation that overlaps with what we do?&rdquo; No. Peek&rsquo;s AI runs inside a property&rsquo;s leasing funnel once an operator has signed and pushed their units live. AICRO is a demand engine that runs one layer above that: cold, net-new outbound, email and LinkedIn, that creates demand before an operator has ever heard of Peek. We do not touch tours, the leasing assistant, renter analytics, or your Yardi and RealPage integrations. That is your product and your moat. We find the operator, start the conversation, and book the demo onto your calendar. 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 operator pools · enterprise to lease-up" },
    { lbl:"Public web", sub:"LinkedIn, NMHC rosters, permit + CO data, news" },
    { lbl:"Stack + intent", sub:"Yardi / RealPage detected, no AI-leasing layer" },
    { lbl:"Event rosters", sub:"NMHC, NAA Apartmentalize, OPTECH, Blueprint" },
  ];
  const signals = [
    { lbl:"New property lease-up · CO issued", color:"#FF8559" },
    { lbl:"VP Marketing / Leasing leader hired", color:"#21A8F2" },
    { lbl:"Occupancy dip · concession spike in metro", color:"#21A8F2" },
    { lbl:"Centralized-leasing initiative announced", color:"#9D4EDD" },
    { lbl:"Yardi / RealPage stack, no AI-leasing layer", color:"#0E9F66" },
    { lbl:"Portfolio acquisition · unit-count 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 VP of Marketing or a regional operator on LinkedIn and a demo on Austin&rsquo;s or a Peek AE&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 multifamily operator-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 operator row: role, firm, unit count, region, 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 Peek 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 Austin or your 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 Peek 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 multifamily operator, regional VP, marketing leader,<br/>or lease-up head on Peek&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 operator feeds back into the seed list as a lookalike. The signal gets more accurate every month. The buyer profile sharpens against the operators Peek actually closes, enterprise versus mid-market versus fee-manager versus lease-up team.
            </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 Peek operator-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: "Enterprise Operators",
      sub: "NMHC Top-50 · national footprint",
      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: "Mid-Market Operators",
      sub: "Regional VPs · 5K-50K units",
      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 property walks",
    },
    {
      desk: "Third-Party / Fee Managers",
      sub: "Marketing + leasing leaders",
      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 leasing day starts",
    },
    {
      desk: "Lease-Up + Developer Teams",
      sub: "Dev + lease-up directors",
      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:"INGRESS",
      color:"#9D4EDD", tint:"#F4ECFE",
      name:"Universe + 6-Signal Layer",
      one:"Deduped roster scored daily against ICP.",
      kpi:[{v:"32,000", l:"records"},{v:"6", l:"signal sources"},{v:"daily", l:"refresh"}],
    },
    {
      tag:"OUTREACH",
      color:"#21A8F2", tint:"#E9F5FE",
      name:"AICRO Send + Connect + Outreach Agent",
      one:"Email + LinkedIn in parallel, per-row composer, CRO-approved.",
      kpi:[{v:"75+", l:"warm inboxes"},{v:"98.4%", l:"deliverability"},{v:"6-8", l:"LI seats"}],
    },
    {
      tag:"REPLY",
      color:"#0E9F66", tint:"#E5F9F0",
      name:"Reply Agent in Slack",
      one:"Classified in minutes, drafted in your voice, two times + fallback.",
      kpi:[{v:"~4 min", l:"to classify"},{v:"6 states", l:"reply taxonomy"},{v:"100%", l:"surfaced"}],
    },
    {
      tag:"COMPOUND",
      color:"#FF8559", tint:"#FFEEE5",
      name:"AICRO Rounds + Lookalike Loop",
      one:"Daily CRM grade, closed-won lookalike feedback, weekly recalibration.",
      kpi:[{v:"daily", l:"CRM grade"},{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.
  // Stack runs past "logo closed" because at Peek's per-unit pricing,
  // the unit that matters is units-onboarded-per-month, not the logo flag.
  // The compounding stages (running volume + lookalike loop) are the real ROI.
  const stack = [
    { stage:"Universe scored",       pool:"32,000", unit:"records",              delta:"-",                  who:"Universe + Signal",                 baseline:"3 weeks manual list build, instant here", 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:"3x lift vs. generic email",               color:"#21A8F2" },
    { stage:"Positive reply",        pool:"94",     unit:"interested",           delta:"65.7%",              who:"Voice-locked composer",             baseline:"benchmark PRR by operator-type",          color:"#0E9F66" },
    { stage:"Demo booked",           pool:"22",     unit:"on Peek calendar",     delta:"23.4%",              who:"Reply Agent, 2-times CTA",          baseline:"~4 min median, no admin lift",            color:"#0E9F66" },
    { stage:"Pilot activated",       pool:"6",      unit:"piloting live units",  delta:"27.3%",              who:"AICRO Rounds, demo to pilot trigger",baseline:"+118% vs. unmanaged book",                color:"#0E9F66" },
    { stage:"Closed operator",       pool:"1-2",    unit:"signed logos / mo",    delta:"~25% pilot-to-close",who:"Peek product, high retention",      baseline:"the contract; the rollout starts here",   color:"#FF8559" },
    { stage:"Live unit volume",      pool:"2K-15K", unit:"units / operator",     delta:"90-day ramp",        who:"Customer Success + Rounds nudges",  baseline:"the unit Peek actually monetizes",        color:"#FF8559" },
    { stage:"Compounding referral",  pool:"3-5",    unit:"warm intros / mo",     delta:"month 4 onward",     who:"Lookalike loop + closed-won seed",  baseline:"the next 67 customers, cheaper than the first 67", 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>03 / The software, drawn</span>
          <h2>The Orchestration is the workflow. This is what compounds when it runs.</h2>
          <p>Three lenses on the same engine: <strong>when</strong> each Peek buyer responds, <strong>what</strong> infrastructure carries the touch, <strong>how much</strong> compression every stage adds over the in-house baseline.</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}}>03A · 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 operator-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}}>03B · 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. Each feeds the next. Numbers are AICRO active-book throughput, Peek hits these 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:"minmax(0,1fr) 360px",
                  gap:0,
                  border:"1px solid var(--mist)",
                  borderLeft:`4px solid ${row.color}`,
                  borderRadius:12,
                  overflow:"hidden",
                  background:"#fff",
                  alignItems:"stretch",
                }}>
                  <div style={{padding:"18px 22px",display:"flex",flexDirection:"column",justifyContent:"center",gap:6,background:`linear-gradient(90deg, ${row.tint} 0%, #fff 100%)`}}>
                    <div style={{display:"flex",alignItems:"center",gap:10}}>
                      <span style={{padding:"3px 10px",background:row.color,color:"#fff",borderRadius:99,fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,fontWeight:800,letterSpacing:"0.12em"}}>{row.tag}</span>
                      <span style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em"}}>{row.name}</span>
                    </div>
                    <div style={{fontSize:12.5,color:"var(--slate-500)",lineHeight:1.45,maxWidth:540}}>{row.one}</div>
                  </div>
                  <div style={{padding:"14px 20px",display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:8,alignItems:"center",borderLeft:"1px solid var(--mist)"}}>
                    {row.kpi.map((k,j) => (
                      <div key={j} style={{textAlign:"center"}}>
                        <div style={{fontSize:18,fontWeight:700,color:row.color,letterSpacing:"-0.01em",lineHeight:1}}>{k.v}</div>
                        <div style={{fontSize:9,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em",marginTop:5,lineHeight:1.3,textTransform:"uppercase"}}>{k.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
                {i < infra.length - 1 && (
                  <div style={{display:"flex",justifyContent:"center",padding:"6px 0"}}>
                    <svg width="18" height="18" 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}}>03C · 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}}>
              Pool size, conversion, the tool doing the work, and the in-house baseline it beats. 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}}>
                A logo is a flag. The unit that pays the Peek P&amp;L is units on the platform. The engine doesn&rsquo;t stop at the signed contract, it keeps surfacing nudges until the operator has pushed thousands of units onto Peek and is feeding the next batch of lookalikes back into the seed.
              </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}}>MONTH 4 ONWARD</div>
              <div style={{fontSize:15,fontWeight:600,lineHeight:1.3}}>Closed customers<br/>refer the next ones</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: "Multifamily 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: "Multifamily + PropTech fluency", vals: [1, 2, 1, 4], aicro: "RemoteLock + 4 active" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">13 / 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 multifamily operators, third-party managers, and lease-up teams.</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:"NEW PROPERTY LEASE-UP",       co:"CO issued · 312-unit Class A · Austin metro" },
    { x:"22%", y:"36%", cls:"hot",   tag:"VP MARKETING HIRED",          co:"18K-unit operator · centralizing leasing" },
    { x:"78%", y:"36%", cls:"warm",  tag:"OCCUPANCY DIP · CONCESSIONS", co:"Sun Belt portfolio · 4-week concession spike" },
    { x:"22%", y:"66%", cls:"warm",  tag:"CENTRALIZED-LEASING PUSH",    co:"Regional operator · pod model announced" },
    { x:"78%", y:"66%", cls:"match", tag:"YARDI / REALPAGE, NO AI LAYER", co:"Fee manager · self-guided tours not live" },
    { x:"50%", y:"86%", cls:"hot",   tag:"PORTFOLIO ACQUISITION",       co:"Multi-market buy · unit count doubled" },
  ];
  return (
    <div className="signal-map">
      <div className="grid"></div>
      <div className="ring r4"></div>
      <div className="ring r3"></div>
      <div className="ring r2"></div>
      <div className="ring r1"></div>
      <div className="signal-pulse"></div>
      <div className="core">
        <span className="l">Live operator signals</span>
        <span className="v">142</span>
        <span className="s">↑ 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 · VP Marketing / leasing / regional ops", val:"Leasing scale outrunning the team in the JD" },
    { lbl:"New property lease-up · CO issued",            val:"Empty units on the clock, leasing velocity is everything" },
    { lbl:"Portfolio acquisition + unit-count jump",      val:"Doubled doors on the same leasing team" },
    { lbl:"Stack detection · Yardi / RealPage, no AI layer",val:"Tours booked by phone, no self-guided or AI assistant" },
    { lbl:"Centralized-leasing initiative announced",     val:"Operating model shift, evaluating conversion levers now" },
    { lbl:"NMHC · NAA Apartmentalize · OPTECH · Blueprint",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: VP Marketing and regional VPs get the A track; site managers get the C track. Proven 47% LinkedIn PRR to multifamily 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 marketing-leader hire, an occupancy dip, a new property lease-up). 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> Peek 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">VP of Marketing</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Carrington Residential · 38K units · TX + FL</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">dan@carringtonres.example</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">LI | New lease-up · occupancy | Multifamily ops</span>
        </div>
      </div>
      <div className="slack-pill"><span className="pdot"></span>Posted VP Leasing role 12 days ago</div>
      <div className="slack-block">
        <span className="lbl">Last Reply:</span>
        <span className="val">We just took two Class A lease-ups live in Austin and our leasing team is buried. Tours are still booked by phone during office hours, and we are bleeding vacant days on units that should be moving. What does the self-guided tour and AI assistant actually look like on a real unit we would hand you?</span>
      </div>
      <div className="slack-block">
        <span className="lbl">Generated Response:</span>
        <span className="val">Dan, a renter touring one of your Austin units at 9pm and the AI assistant qualifying and booking them without a leasing agent on the clock, that is exactly the screen we would walk on a call. Operators your size run their lease-ups through Peek and pull roughly 30% of vacancy loss out of the property. I have Tuesday 2:30 or Thursday 11 Eastern. Send me one live unit and we will run it end to end.</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 Residential | Sarah Holloway</strong> · <span style={{color:"#A8AFC0"}}>Demo Held · Stage: Pilot pending</span>
      </div>
      <div style={{fontSize:12,color:"#A8AFC0",marginBottom:10}}>Recommended for: Peek 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">VP of Marketing</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">s.holloway@holloway-res.example</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Holloway Residential · 24K units · 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 pilot 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 Peek demo on May 4 and haven&rsquo;t spun up the pilot yet. Give me 15 minutes to run one of your live units through self-guided tours and the AI assistant end to end. Holloway runs 24K units and your leasing team is booking tours by phone during office hours, Peek pulls roughly 30% of vacancy loss out of every property it runs on. 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 AI assistant running a live unit tour to lease 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 pilot activation, no follow-up logged. 24K-unit operator means the vacancy-loss saving compounds across every vacant unit at once.
      </div>
      <div className="slack-signals">
        <span className="sl">Signals observed:</span>
        <ul>
          <li>Peek demo held May 4, 14 days ago, no pilot activation in CRM</li>
          <li>24K units across TX + AZ, both Sun Belt markets with active lease-up volume</li>
          <li>Posted 2 leasing roles last quarter, manual tour scheduling 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 → pilot 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 Austin.<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:"Marketing and leasing-leader hires, new property lease-ups with COs issued, portfolio acquisitions and unit-count jumps, Yardi or RealPage stacks with no AI-leasing layer, centralized-leasing initiatives, and the NMHC + NAA Apartmentalize + OPTECH + Blueprint conference rosters. The signal map fires when an operator is feeling the exact pain Peek solves: vacant days, slow tour-to-lease conversion, and leasing-agent time eaten by tours and follow-up 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 Peek rep in Slack. Demo-held-no-pilot is a daily Rounds query. Your Peek team handles the product walkthrough and live-unit 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 operator-type and region, 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 = {
  enterprise_operators: {
    label: "Enterprise Operators",
    sub: "NMHC Top-50 · 50K+ units",
    summary: "Enterprise operators booking demos within the week.",
    summaryBody: "National operators running 50K+ units are the strongest pool. The opener that converts is a new lease-up wave plus a recent VP Marketing or centralized-leasing hire on LinkedIn, a team under pressure to move units faster with the same headcount. A VP of Marketing at a national operator 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 operators in play", revenue:"3 pilots" },
    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 | New lease-up wave | Enterprise Operators · Sun Belt", sent:"4,820", contacted:"3,140", connReq:"-", connAcc:"-", positives:"38", posRate:"28.4%", accept:"-" },
      { type:"li", name:"LI | VP Marketing | NMHC Top-50 Operators", sent:"312", contacted:"264", connReq:"264", connAcc:"122", positives:"24", posRate:"61.1%", accept:"46.2%", active:true },
      { type:"em", name:"EM | Centralized-leasing initiative | Enterprise Ops", sent:"3,240", contacted:"2,118", connReq:"-", connAcc:"-", positives:"18", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Regional VP | National Operators · 50K+ units", sent:"148", contacted:"122", connReq:"122", connAcc:"58", positives:"10", posRate:"52.6%", accept:"47.5%" },
      { type:"em", name:"EM | Portfolio acquisition · unit jump | Multi-Market", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"4", posRate:"19.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | VP Marketing | NMHC Top-50 Operators",
      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:"Pilots", 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 · VP Marketing · 38K-unit operator", date:"May 18", tag:"Pilot Activated", booked:true },
        { name:"Lina Mansour · SVP Operations · Sun Belt portfolio", date:"May 17", tag:"Demo Booked", booked:true },
        { name:"Maria Velez · Regional VP · FL operator · 22K units", date:"May 16", tag:"Interested" },
        { name:"Brett Coleman · VP Leasing · AZ operator · acquisition", date:"May 15", tag:"Demo Booked", booked:true },
        { name:"Sofie Khan · Director Marketing · GA + SC · 15K units", date:"May 14", tag:"Interested" },
        { name:"Reza Karimi · Head of Leasing · TX operator", date:"May 13", tag:"Interested" },
        { name:"Marcus Pace · VP Marketing · CO operator · 18K units", date:"May 12", tag:"Interested" },
      ],
    },
  },
  mid_market_operators: {
    label: "Mid-Market Operators",
    sub: "Regional VPs · 5K-50K units",
    summary: "Regional VPs responding to the vacancy-loss angle.",
    summaryBody: "Mid-market operators running 5K to 50K units, where every vacant day is rent that never comes back and the leasing team is booking tours by phone. The opener is a new property lease-up plus a recent leasing or marketing-leader hire. Regional VPs and heads of leasing are the right title tier. Illustrative pool projection.",
    kpis: { sent:"6,140", positives:"28", meetings:"6", pipeline:"11 operators in play", revenue:"1 pilot" },
    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 | New lease-up + leasing hire | Mid-Market Operators", sent:"2,140", contacted:"1,388", connReq:"-", connAcc:"-", positives:"14", posRate:"24.0%", accept:"-" },
      { type:"li", name:"LI | Regional VP | Operators · 5K-50K units", sent:"148", contacted:"112", connReq:"112", connAcc:"48", positives:"8", posRate:"52.9%", accept:"42.9%", active:true },
      { type:"em", name:"EM | Occupancy dip · concessions | Sun Belt Operators", sent:"1,820", contacted:"1,124", connReq:"-", connAcc:"-", positives:"6", posRate:"19.4%", accept:"-" },
    ],
    drawer: {
      name: "LI | Regional VP | Operators · 5K-50K units",
      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:"Pilots", val:1, w:2, color:"#0E9F66", pct:"1 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Sarah Holloway · VP Marketing · 24K-unit TX + AZ operator", date:"May 18", tag:"Demo Booked", booked:true },
        { name:"Priya Anand · Regional VP · NY metro operator · 18K units", date:"May 16", tag:"Interested" },
        { name:"Dale Foster · Head of Leasing · independent FL operator", date:"May 14", tag:"Interested" },
        { name:"Nadia Cole · Director Leasing · Midwest operator · 9K units", date:"May 13", tag:"Demo Booked", booked:true },
      ],
    },
  },
  third_party_managers: {
    label: "Third-Party / Fee Managers",
    sub: "Marketing + leasing leaders",
    summary: "Fee-manager leasing heads responding to the per-property conversion angle.",
    summaryBody: "Third-party and fee managers running 200 to 2,000 properties across multiple owners, where leasing performance per property is the metric every owner grades them on. The trigger is a centralized-leasing initiative plus a Yardi or RealPage stack with no AI-leasing layer live. Heads of marketing and leasing operations are the right title tier. Illustrative pool projection.",
    kpis: { sent:"5,420", positives:"22", meetings:"5", pipeline:"9 operators in play", revenue:"1 pilot" },
    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 | Centralized leasing + stack gap | Fee Managers", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"10", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Head of Leasing Ops | Fee Managers · 200-2K props", sent:"148", contacted:"122", connReq:"122", connAcc:"54", positives:"8", posRate:"58.3%", accept:"44.3%", active:true },
      { type:"em", name:"EM | New management contracts · unit jump | Fee Managers", sent:"1,420", contacted:"918", connReq:"-", connAcc:"-", positives:"4", posRate:"21.1%", accept:"-" },
    ],
    drawer: {
      name: "LI | Head of Leasing Ops | Fee Managers · 200-2K props",
      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:"Pilots", val:1, w:1, color:"#0E9F66", pct:"1 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Elin Ross · Head of Leasing Ops · 5-state fee manager", date:"May 18", tag:"Demo Booked", booked:true },
        { name:"Sanjay Mehta · Director Marketing · CA fee manager", date:"May 16", tag:"Interested" },
        { name:"Grace Holloway · VP Leasing · GA fee manager · 320 props", date:"May 15", tag:"Interested" },
        { name:"Viktor Salas · SVP Ops · multi-state fee manager · 1,200 props", date:"May 13", tag:"Pilot Activated", booked:true },
      ],
    },
  },
  leaseup_developers: {
    label: "Lease-Up + Developer Teams",
    sub: "New deliveries · multi-asset",
    summary: "Lease-up directors responding to the new-delivery velocity angle.",
    summaryBody: "Developers and lease-up teams bringing new properties online, where the clock starts the day the CO is issued and every empty unit is carrying cost. The message leads with the lease-up-velocity wedge, self-guided tours and the AI assistant filling units before the leasing office is even fully staffed. Development and lease-up directors are the title tier. Illustrative pool projection.",
    kpis: { sent:"8,820", positives:"42", meetings:"9", pipeline:"16 operators in play", revenue:"2 pilots" },
    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 | CO issued · lease-up velocity | Developers", sent:"3,140", contacted:"2,018", connReq:"-", connAcc:"-", positives:"22", posRate:"26.4%", accept:"-" },
      { type:"li", name:"LI | Development / Lease-Up Director | New Deliveries", sent:"212", contacted:"180", connReq:"180", connAcc:"82", positives:"14", posRate:"56.0%", accept:"45.6%", active:true },
      { type:"em", name:"EM | Multi-property delivery pipeline | Developers", sent:"2,420", contacted:"1,612", connReq:"-", connAcc:"-", positives:"6", posRate:"22.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | Development / Lease-Up Director | New Deliveries",
      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:"Pilots", val:2, w:2, color:"#0E9F66", pct:"2 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Tara Nguyen · Development Director · TX developer", date:"May 18", tag:"Pilot Activated", booked:true },
        { name:"Beau Carter · Lease-Up Director · TX + AZ developer", date:"May 17", tag:"Demo Booked", booked:true },
        { name:"Imani Clarke · VP Development · multi-asset owner · FL", date:"May 15", tag:"Interested" },
        { name:"Felipe Duarte · Head of Lease-Up · Mountain West 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 / peek / 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">Pilots / 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>
  );
}

// Consolidated: the live interactive portal + the four supporting screens
// in one continuous dark section. One narrative beat, not two.
function ClientPortalSection({ icp, setIcp }) {
  const shots = [
    { src:"uploads/pasted-1777222339189-0.png", label:"Executive Summary",          caption:"Monday view. Email plus LinkedIn side by side, weekly positive replies, every campaign with its full funnel." },
    { src:"uploads/pasted-1777222392601-0.png", label:"Campaign Drawer",            caption:"Click any campaign to drill in. Connection request, accepted, replied, positive, demo, pilot activated, end to end." },
    { src:"uploads/pasted-1777222050657-0.png", label:"Reply Agent in Slack",       caption:"An operator's reply hits Slack within minutes, classified, response drafted, demo booked. A Peek rep approves before send." },
    { src:"uploads/pasted-1777222220819-0.png", label:"Sales Action · AICRO Rounds",caption:"A 24K-unit operator saw the demo 14 days ago, no pilot. Rounds grades it Grade A, routes to the rep, writes the script." },
  ];
  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. Live interactive view on top, the four screens you actually live in below.
          </p>
        </div>
        <ClientPortalV2 icp={icp}/>
        <div style={{marginTop:48,paddingTop:32,borderTop:"1px solid rgba(255,255,255,0.08)"}}>
          <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",marginBottom:18,flexWrap:"wrap",gap:12}}>
            <div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,0.5)",textTransform:"uppercase",fontWeight:700,marginBottom:4}}>The four screens, in detail</div>
              <h3 style={{color:"#fff",fontSize:22,margin:0,letterSpacing:"-0.01em"}}>Monday summary, campaign drill-in, Slack reply agent, sales action card.</h3>
            </div>
            <span style={{fontSize:12,color:"rgba(255,255,255,0.55)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>real data, anonymized</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
            {shots.map((s,i) => (
              <div key={i} style={{
                background:"#fff",
                border:"1px solid rgba(255,255,255,0.10)",
                borderRadius:14,
                overflow:"hidden",
                boxShadow:"0 1px 2px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.30)",
              }}>
                <div style={{padding:"10px 16px",background:"#F1F5F9",borderBottom:"1px solid #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:"#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:"#64748B",lineHeight:1.55}}>{s.caption}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CRO Stack ─────────────────
function CROStack() {
  const modules = [
    { l:"Strategy", t:"ICP & Signal Map", d:"4 operator pools (enterprise operators, mid-market operators, third-party managers, lease-up + developer teams) across the US. 6 signal layers that fire when an operator needs Peek. Quarterly refresh tuned against the profiles that convert.", delivs:["4 operator ICP cards","6-source signal architecture","Pool-concentration scorecard","Quarterly recalibration"] },
    { l:"Playbooks", t:"Productized SOPs", d:"Discovery scripts and demo flows for VP Marketing, regional VPs, fee-manager leasing heads, and lease-up directors. ROI framing: vacant days removed and tour-to-lease conversion lifted. AI-leasing-layer positioning vs point chatbot vendors.", delivs:["Discovery script · per operator-type","Demo flow + ROI walkthrough","Positioning battlecards","Onboarding checklist"] },
    { l:"Comp", t:"Rep Comp Structure", d:"New-logo accelerators tuned to Peek&rsquo;s SaaS model. Pilot-to-paid SPIFF. Override design for the US sales bench you hire next.", delivs:["Ramp plan · 90/180/365","Pilot activation SPIFF","New-logo accelerator","Investor-defendable model"] },
    { l:"Onboarding", t:"Operator Cadence", d:"Monday signal review with Austin. 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">09 / 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 multifamily operators, fee managers, and lease-up teams 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 (Austin + team)</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 operator pools (enterprise operators, mid-market operators, third-party managers, lease-up + developer teams), 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 multifamily operators, the exact buyers Peek needs. RemoteLock proves the AICRO multifamily outbound discipline: operator-to-operator messaging that gets named groups like Greystar and Namdar replying. Same buyer Peek sells to, same inbox, same response patterns.",
      attr: "RemoteLock · PropTech engagement",
      systems: ["Operator-to-Operator Outbound", "Vertical Segmentation", "Stack-Specific Targeting", "Reply Triage + Routing"],
      metrics: [
        { v: "47%", l: "LinkedIn PRR", live: true },
        { v: "Same buyer", l: "as Peek" },
        { 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 Peek: an AI-native PropTech 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-native", l: "PropTech" },
        { v: "Outbound", l: "run by AICRO" },
        { v: "Same play", l: "as Peek", 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">10 / 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 operators, managers, and lease-up teams who actually move units. RemoteLock and Henry AI are the closest reads on Peek.</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 + Peek principals (Austin, 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">12 / 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"}}>Austin, the custom demo is built. Let&rsquo;s walk it together.</h2>
            <p>We&rsquo;ve already built the Peek instance. The orchestration layer is live: four operator pools graded (enterprise operators, mid-market operators, third-party managers, lease-up + developer teams), signals firing across the US, 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 operator pools. You see what we&rsquo;d send to a VP of Marketing, a regional VP, a fee-manager leasing head, and a lease-up director 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">PEEK · PROPOSAL · 2026-06-09</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:"Enterprise Operators", stat:"20M+", statLbl:"US professionally managed units", frag:"The largest US operators run millions of units across national footprints. The marquee names came to AI leasing through relationships; the rest of the enterprise tier is actively evaluating conversion levers as centralized leasing scales.", buyer:"VP Marketing / SVP Operations" },
    { v:"Mid-Market Operators", stat:"7K+", statLbl:"US operators · 5K-50K units", frag:"Thousands of regional operators running 5K to 50K units, where a single new lease-up can swamp the leasing team and every vacant day is rent that never comes back.", buyer:"Regional VP / Head of Leasing" },
    { v:"Third-Party / Fee Managers", stat:"3,400+", statLbl:"US third-party managers", frag:"Fee managers run leasing for owners who grade them on performance per property. Most still book tours by phone, with Yardi or RealPage in place but no AI-leasing layer live.", buyer:"Head of Leasing Ops / VP Marketing" },
    { v:"Lease-Up + Developer Teams", stat:"400K+", statLbl:"new US units delivered / yr", frag:"Hundreds of thousands of new units come online every year. The clock starts the day the CO is issued, and an empty unit in lease-up is pure carrying cost until it leases.", buyer:"Development / Lease-Up Director" },
  ];
  return (
    <section className="section" id="universe">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>04 / 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 Peek can win across the US. 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}}>
              Thousands of US multifamily operators, fee managers, and lease-up teams, bleeding vacant days while their leasing teams book tours by phone during office hours. They will not all find Peek 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:"Lincoln Property Company",
      vert:"Enterprise Operators",
      size:"US · ~210K units managed · national",
      why:"One of the largest US managers with continuous Sun Belt lease-up volume and a centralized-leasing model expanding across regions.",
      how:"Run Peek on the new lease-ups first, where vacant-day cost is highest, then expand to the stabilized book.",
      next:"Land one region, expand to the national managed portfolio. The same buyer, every market.",
    },
    {
      co:"Bozzuto",
      vert:"Enterprise Operators",
      size:"US · ~90K+ units · East Coast",
      why:"Award-winning leasing and marketing org with a premium lease-up pipeline across DC, NY, and Boston metros.",
      how:"Pilot Peek on a flagship lease-up, measure tour-to-lease lift against their own leasing benchmark.",
      next:"A brand that grades itself on resident experience adopts the tool that proves it, property by property.",
    },
    {
      co:"Avenue5 Residential",
      vert:"Third-Party / Fee Managers",
      size:"US · ~110K+ units · third-party manager",
      why:"Fast-growing fee manager taking on new management contracts, where leasing performance per property is the owner scorecard.",
      how:"Deploy Peek as the leasing-conversion layer they offer every owner they manage for.",
      next:"One adoption, every managed property becomes a Peek property. The wedge scales with their book.",
    },
    {
      co:"Asset Living",
      vert:"Third-Party / Fee Managers",
      size:"US · 250K+ units · largest 3rd-party manager",
      why:"Among the largest US third-party managers, with rapid portfolio growth across conventional and student housing.",
      how:"Centralized-leasing pilot across one market, measure vacant days removed per property.",
      next:"Scale across one of the largest managed unit counts in the country off a single proof point.",
    },
    {
      co:"Camden Property Trust",
      vert:"Enterprise Operators",
      size:"US · ~58K units · public REIT",
      why:"Public multifamily REIT carrying occupancy and concession pressure across Sun Belt markets.",
      how:"Run Peek on the highest-concession communities and tie the vacancy-loss lift directly to NOI.",
      next:"REIT economics make per-unit vacancy compression a board-level number, not a line item.",
    },
    {
      co:"Morgan Properties",
      vert:"Enterprise Operators",
      size:"US · ~95K units · largest private owner",
      why:"One of the largest private apartment owners, with an active acquisition program adding units to the same leasing team.",
      how:"Deploy Peek across acquired communities where leasing infrastructure is thinnest.",
      next:"Acquisition-driven growth means new units land faster than leasing headcount, the exact gap Peek fills.",
    },
  ];
  return (
    <section className="section section-soft" id="targets">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">05 / 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 operator carries a public signal, a specific way Peek lands, and the wedge that makes it scalable. 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.5,margin:0}}>{t.why}</p>
              </div>
              <div>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"#0E9F66",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>How they use it</div>
                <p style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5,margin:0}}>{t.how}</p>
              </div>
              <div style={{marginTop:"auto",paddingTop:8,borderTop:"1px dashed var(--mist)"}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"var(--slate-400)",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>The wedge</div>
                <p style={{fontSize:12,color:"var(--slate-500)",lineHeight:1.5,margin:0,fontStyle:"italic"}}>{t.next}</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 operators. Illustrative angles. In week one we turn this into a scored, deduped A-list across all four segments with verified public signals (new property lease-ups and COs, marketing and leasing-leader hires, portfolio acquisitions, centralized-leasing initiatives, Yardi or RealPage stacks with no AI-leasing layer), refreshed as new signals fire.
        </div>
      </div>
    </section>
  );
}

// ─── Section: ICP Launch Map ──────────────────────────────
// A concentrated map for the US launch: four operator tiers, named
// real US operators, decision-maker title, the wedge to open with.
// Existing Peek customers (Greystar, Brookfield, Related, Cortland,
// RPM Living, Cushman & Wakefield) are excluded — these are net-new.
function ICPLaunchMap() {
  const tiers = [
    {
      tier:"T1",
      label:"Enterprise Operators",
      color:"#21A8F2", tint:"#E9F5FE",
      universe:"~20M+ US managed units",
      buyer:"VP Marketing / SVP Operations",
      wedge:"A new lease-up wave plus a recent marketing or centralized-leasing leadership hire. The team is under pressure to move units faster with the same headcount.",
      firms:[
        { n:"Lincoln Property Company",      loc:"Dallas, TX · ~210K units", tag:"already on A-list" },
        { n:"Morgan Properties",             loc:"King of Prussia, PA · ~95K units", tag:"already on A-list" },
        { n:"MAA",                           loc:"Germantown, TN · ~100K units" },
        { n:"UDR",                           loc:"Highlands Ranch, CO · ~60K units" },
        { n:"Bell Partners",                 loc:"Greensboro, NC · ~85K units" },
        { n:"AvalonBay Communities",         loc:"Arlington, VA · ~90K units" },
        { n:"Equity Residential",            loc:"Chicago, IL · ~80K units" },
        { n:"Essex Property Trust",          loc:"San Mateo, CA · ~62K units" },
        { n:"Bozzuto",                       loc:"Greenbelt, MD · ~90K units", tag:"already on A-list" },
        { n:"Camden Property Trust",         loc:"Houston, TX · ~58K units", tag:"already on A-list" },
      ],
    },
    {
      tier:"T2",
      label:"Mid-Market Operators",
      color:"#9D4EDD", tint:"#F4ECFE",
      universe:"~7,000 US operators · 5K-50K units",
      buyer:"Regional VP / Head of Leasing",
      wedge:"A single new lease-up can swamp the leasing team. Every vacant day is rent that never comes back, and tours are still booked by phone.",
      firms:[
        { n:"RangeWater Real Estate",        loc:"Atlanta, GA · ~90K units" },
        { n:"BH Management",                 loc:"Des Moines, IA · ~90K units" },
        { n:"Highmark Residential",          loc:"Dallas, TX · ~60K units" },
        { n:"Berkshire Residential",         loc:"Boston, MA · multifamily" },
        { n:"CONAM Management",              loc:"San Diego, CA · ~50K units" },
        { n:"Cardinal Group",                loc:"Denver, CO · conventional + student" },
        { n:"Western Wealth Communities",    loc:"Scottsdale, AZ · Sun Belt" },
        { n:"ZRS Management",                loc:"Orlando, FL · ~75K units" },
        { n:"Drucker + Falk",                loc:"Newport News, VA" },
        { n:"Roscoe Property Management",    loc:"Austin, TX" },
      ],
    },
    {
      tier:"T3",
      label:"Third-Party / Fee Managers",
      color:"#0E9F66", tint:"#E5F9F0",
      universe:"~3,400 US third-party managers",
      buyer:"Head of Leasing Ops / VP Marketing",
      wedge:"Owners grade fee managers on leasing performance per property. Yardi or RealPage is in place, but no AI-leasing layer is live.",
      firms:[
        { n:"Asset Living",                  loc:"Houston, TX · 250K+ units", tag:"already on A-list" },
        { n:"Avenue5 Residential",           loc:"Seattle, WA · ~110K units", tag:"already on A-list" },
        { n:"Willow Bridge Property Co",     loc:"Dallas, TX · ~200K units" },
        { n:"FPI Management",                loc:"Folsom, CA · ~160K units" },
        { n:"WinnResidential",               loc:"Boston, MA · ~110K units" },
        { n:"Monument Real Estate Services", loc:"Miami, FL · fee manager" },
        { n:"Hercules Living",               loc:"Atlanta, GA · fee manager" },
        { n:"BG Multifamily",                loc:"Dallas, TX · staffing + mgmt" },
      ],
    },
    {
      tier:"T4",
      label:"Lease-Up + Developer Teams",
      color:"#FF8559", tint:"#FFEEE5",
      universe:"~400K+ new US units delivered / yr",
      buyer:"Development / Lease-Up Director",
      wedge:"The clock starts the day the CO is issued. An empty unit in lease-up is pure carrying cost until it leases, so velocity is everything.",
      firms:[
        { n:"Mill Creek Residential",        loc:"Boca Raton, FL · multifamily dev" },
        { n:"Wood Partners",                 loc:"Atlanta, GA · multifamily dev" },
        { n:"Crescent Communities",          loc:"Charlotte, NC · multifamily" },
        { n:"Toll Brothers Apartment Living",loc:"Fort Washington, PA · multifamily" },
        { n:"The NRP Group",                 loc:"Cleveland, OH · multifamily dev" },
        { n:"LMC (Lennar Multifamily)",      loc:"Charlotte, NC · multifamily dev" },
        { n:"Alliance Residential",          loc:"Phoenix, AZ · multifamily dev" },
        { n:"ECI Group",                     loc:"Atlanta, GA · multifamily" },
      ],
    },
  ];
  return (
    <section className="section section-soft" id="icp-map">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">06 / ICP launch map · the first 50 operators</span>
          <h2>The right ICP to start the US, named and tiered.</h2>
          <p>A concentrated map for the US launch. Four operator tiers, decision-maker title per tier, the wedge to open with, and the named operators we&rsquo;d work in week one. All net-new, your existing customers are excluded. Live signals refresh the list weekly once we are live.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:14}}>
          {tiers.map((t,i) => (
            <div key={i} className="card" style={{padding:0,overflow:"hidden",display:"flex",flexDirection:"column",borderTop:`4px solid ${t.color}`}}>
              <div style={{padding:"18px 20px 14px 20px",background:t.tint}}>
                <div style={{display:"flex",alignItems:"baseline",gap:10,marginBottom:6}}>
                  <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,fontWeight:800,color:t.color,letterSpacing:"0.06em"}}>{t.tier}</span>
                  <span style={{fontSize:15,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.25}}>{t.label}</span>
                </div>
                <div style={{fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.02em"}}>{t.universe}</div>
                <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",marginTop:3,letterSpacing:"0.02em"}}><strong style={{color:"var(--slate-700)"}}>BUYER · </strong>{t.buyer}</div>
              </div>
              <div style={{padding:"14px 20px 10px 20px",borderBottom:"1px solid var(--mist)"}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.10em",color:t.color,textTransform:"uppercase",fontWeight:700,marginBottom:5}}>The wedge</div>
                <p style={{fontSize:12,color:"var(--slate-700)",lineHeight:1.55,margin:0}}>{t.wedge}</p>
              </div>
              <div style={{padding:"14px 20px 18px 20px",flex:1}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.10em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,marginBottom:8}}>Named first-touch</div>
                <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:8}}>
                  {t.firms.map((f,j) => (
                    <li key={j} style={{display:"flex",flexDirection:"column",gap:1}}>
                      <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:6}}>
                        <span style={{fontSize:12.5,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.005em"}}>{f.n}</span>
                        {f.tag && <span style={{fontSize:8.5,fontWeight:700,color:t.color,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em",textTransform:"uppercase",whiteSpace:"nowrap"}}>★ A</span>}
                      </div>
                      <span style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.01em"}}>{f.loc}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
        <div style={{marginTop:20,padding:"18px 24px",background:"#1C1C24",borderRadius:12,color:"#fff",display:"flex",gap:24,alignItems:"center",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 we&rsquo;d ship in week one</div>
            <div style={{fontSize:13.5,lineHeight:1.55,color:"#fff",fontWeight:500}}>
              Each named firm above gets enriched with role, recent signal, and direct-line contact (managing broker name, partner name, COO name). Pattern-matched email plus LinkedIn approach paths. Tier&nbsp;1 + Tier&nbsp;2 get the first 60 days of send capacity (~75 inboxes split 60/40), Tier&nbsp;3 + Tier&nbsp;4 come online in week three.
            </div>
          </div>
          <div style={{padding:"12px 18px",background:"#FF8559",borderRadius:10,minWidth:200}}>
            <div style={{fontSize:9.5,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.12em",fontWeight:700,color:"rgba(255,255,255,0.85)",marginBottom:4,textTransform:"uppercase"}}>Parallel vector</div>
            <div style={{fontSize:13,fontWeight:600,color:"#fff",lineHeight:1.4}}>PropTech network intro: Doug&rsquo;s operator relationships across multifamily and PropTech open doors at the platform layer, not seat by seat.</div>
          </div>
        </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/>
      <SoftwareImpact/>
      <ProspectUniverse/>
      <ATierTargets/>
      <ICPLaunchMap/>
      <SignalToScale/>
      <ClientPortalSection icp={t.icp} setIcp={setIcp}/>
      <CROStack/>
      <CaseStudies/>
      <CostCompare/>
      <NinetyDay/>
      <Matrix/>
      <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:"enterprise_operators",   label:"Enterprise Operators"},
            {value:"mid_market_operators",   label:"Mid-Market Operators"},
            {value:"third_party_managers",   label:"Third-Party / Fee Managers"},
            {value:"leaseup_developers",     label:"Lease-Up + Developer Teams"},
          ]}
          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/>);