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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "icp": "owners_developers",
  "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">INGENIOUS.BUILD 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 Nick Carter · INGENIOUS.BUILD · June 15, 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          Nick, you built the platform that runs construction end to end.<br/>
          <span style={{color:"#21A8F2"}}>JLL, Cushman, Turner, and Greystar already run on it.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:880}}>
          The product wins the rooms it gets into. The ceiling now is reach, the other 12,000 owners, developers, and GCs who never see it. AICRO runs cold, operator-to-operator outbound that fills your pipeline with net-new buyers. 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:"2-4 hrs/day", l:"INGENIOUS · time back per project lead"},
            {v:"Same buyer", l:"owners, developers, GCs · our active book"},
            {v:"$75M+", l:"pipeline built for one PropTech client · Gumption"},
            {v:"15+ yrs", l:"PropTech revenue operator running the engine"},
          ].map((s,i) => (
            <div key={i}>
              <div style={{fontSize:22,fontWeight:600,letterSpacing:"-0.01em",color:dark ? "#fff" : "var(--shark)"}}>{s.v}</div>
              <div style={{fontSize:11,color:dark ? "rgba(255,255,255,0.55)" : "var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase",marginTop:4,lineHeight:1.4}}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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

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

// ─── Section 1: Market Thesis · Why Now ────────────────────────
function MarketThesis() {
  const drivers = [
    {
      tag: "01 · PROOF IS IN THE LOGOS",
      stat: "JLL → Turner",
      statLbl: "enterprise adoption · product-market fit nailed",
      title: "When JLL, Cushman, Turner, and Related all run on it, the product is done.",
      body: "Construction software is sticky once a project team adopts it and brutal when it does not. JLL, Cushman &amp; Wakefield, Colliers, Related, Tishman Speyer, Turner, and Greystar running budgets, change orders, RFIs, and closeout on INGENIOUS says the platform has crossed the line where the buyer is built into the workflow. Two to four hours back per day, 10x fewer change-order disputes, one connected source of truth instead of fifteen spreadsheets. Once a team runs a project through it, the spreadsheet-and-email version becomes unworkable. The product is done. The ceiling is now the number of mid-market owners, developers, and GCs who have ever run a project on it.",
      source: "Source: INGENIOUS.BUILD customer list + product metrics",
    },
    {
      tag: "02 · THE FRAGMENTED MID-MARKET",
      stat: "700K+",
      statLbl: "US construction + development firms",
      title: "The enterprise logos are landed. The mid-market is wide open.",
      body: "Marquee owners and GCs came in through relationships and reputation. Those land enterprise logos. They do not land the tens of thousands of mid-market owners, developers, owner&rsquo;s reps, and regional GCs who still track project financials across disconnected spreadsheets, accounting software, and email. The US has 700,000+ construction establishments and tens of thousands of active real-estate developers and owner&rsquo;s-rep firms. They need to be touched directly, in their language, with their vocabulary, budgets, commitments, change orders, draws, closeout. That is an outbound discipline, not an inbound one.",
      source: "Source: US Census Bureau · construction establishments",
    },
    {
      tag: "03 · THE BUYER IS REACHABLE",
      stat: "57%+",
      statLbl: "LinkedIn positive-reply rate · RE operators",
      title: "VP Construction and directors of development answer when you speak their project.",
      body: "Owners, developers, owner&rsquo;s-rep principals, and GC project-controls leaders sit at lean headcount and answer LinkedIn and email directly when peers, not vendors, reach out. AICRO runs this exact buyer today. For Gumption and Johnson Capital, real estate and capital-markets operators, LinkedIn positive-reply rates ran 57% and named groups replied by name. The same playbook ports to construction leadership using a project-delay and change-order-dispute opener instead of a capital-markets one.",
      source: "Source: AICRO · active PropTech + RE engagements",
    },
    {
      tag: "04 · CATEGORY TAILWIND",
      stat: "Repeatable",
      statLbl: "acquisition motion · not a referral chart",
      title: "Construction-tech spend is climbing. A repeatable motion is the way to capture it.",
      body: "Construction technology budgets are expanding as owners and GCs digitize after a decade of margin pressure and change-order disputes. The demand exists. Today INGENIOUS&rsquo;s growth is reputation-led, partnership-driven, and referral-warm, which captures the buyers who already know the name. Install a net-new engine now and the next twelve months show a graded universe, a live signal layer, and a booked-demo cadence the team can hand to a sales hire as you scale. The chart that compounds is not the logo wall, it is the logo wall plus a working machine that fills the calendar every Monday.",
      source: "Source: industry construction-technology adoption trend",
    },
  ];
  return (
    <section className="section" id="thesis">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>01 / Why now</span>
          <h2>The product is done. The growth ceiling is reach.</h2>
          <p>An enterprise customer list most construction-tech founders would trade a year of runway for is the strongest signal a platform can give. The value INGENIOUS creates is now capped by one thing. How many of the right owners, developers, owner&rsquo;s reps, GCs, and design firms outside that list ever run a project on it. Four forces make closing that gap the highest-leverage move INGENIOUS can make this year.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          {drivers.map((d,i) => (
            <div key={i} className="card" style={{padding:28,display:"flex",flexDirection:"column",gap:14}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:600}}>{d.tag}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:14,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:42,fontWeight:600,letterSpacing:"-0.02em",color:"var(--shark)",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <h3 style={{fontSize:20,lineHeight:1.3,color:"var(--shark)",margin:0}}>{d.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>{d.body}</p>
            </div>
          ))}
        </div>
        <div style={{marginTop:32,padding:"24px 28px",background:"var(--shark)",borderRadius:14,color:"#fff"}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600,marginBottom:12}}>The obvious question</div>
          <div style={{fontSize:18,lineHeight:1.5,color:"#fff",fontWeight:500,maxWidth:940}}>
            &ldquo;Aren&rsquo;t you selling me automation my product already does?&rdquo; No. Your AI runs inside a customer&rsquo;s projects once they&rsquo;re on the platform. We run cold outbound that creates the demand before that. We never touch financials, RFIs, or closeout, that&rsquo;s your moat. We sit one layer up and feed it.
          </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 buyer-type pools · owners, devs, reps, GCs" },
    { lbl:"Public web", sub:"LinkedIn, permit filings, ENR + ULI rosters, news" },
    { lbl:"Stack + intent", sub:"PM-tool detection, spreadsheet-stack gaps" },
    { lbl:"Event rosters", sub:"Groundbreak, ENR FutureTech, AGC, NAIOP, BuiltWorlds" },
  ];
  const signals = [
    { lbl:"Project delay / change-order dispute in the press", color:"#21A8F2" },
    { lbl:"VP Construction / Project Controls hire", color:"#21A8F2" },
    { lbl:"New development pipeline or fund close", color:"#9D4EDD" },
    { lbl:"Major permit pulled · new ground-up project", color:"#9D4EDD" },
    { lbl:"No integrated PM + financials platform detected", color:"#0E9F66" },
    { lbl:"GC / developer M&A · project-volume 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 Construction or director of development on LinkedIn and a demo on Nick&rsquo;s or your sales team&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)"}}>~38K US owner, developer, rep, and GC 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 buyer row: role, firm, active project count, tenure, recent activity, top signal fired</div>
            </div>
            <div style={{padding:"16px 18px",background:"#F6F8FB",borderRight:"1px solid var(--mist)",position:"relative"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"#21A8F2",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>COMPOSE</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>Picks signal · picks proof · writes relevance hook · matches INGENIOUS 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 Nick or your sales lead. 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 INGENIOUS 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 owner, developer, owner&rsquo;s rep,<br/>or GC project leader on INGENIOUS&rsquo;s calendar. Every week.
            </div>
          </div>

          {/* Compounding loop footnote */}
          <div style={{marginTop:24,padding:"16px 20px",background:"#F6F8FB",border:"1px dashed var(--mist)",borderRadius:10,display:"flex",alignItems:"center",gap:14}}>
            <div style={{width:36,height:36,borderRadius:"50%",background:"#fff",border:"1px solid var(--mist)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#21A8F2" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
            </div>
            <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.55}}>
              <strong style={{color:"var(--shark)"}}>Compounding loop.</strong> Every booked demo and closed customer feeds back into the seed list as a lookalike. The signal gets more accurate every month. The buyer profile sharpens against the firms INGENIOUS actually closes, owner versus developer versus owner&rsquo;s rep versus GC.
            </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 INGENIOUS buyer-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-buyer-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: "Owners & Developers",
      sub: "VP Construction · Dir. of Development",
      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, around portfolio reviews",
    },
    {
      desk: "Owner's Reps / PM Firms",
      sub: "Principals · program managers",
      cells: [
        [42,68,84,88,72,40,32,52,70,66,46,24],
        [48,74,90,92,76,44,34,58,76,70,50,24],
        [46,72,88,90,74,42,32,56,74,68,48,22],
        [44,68,84,86,70,40,30,54,72,64,44,20],
        [26,44,60,64,52,28,22,38,52,48,30,14],
      ],
      peak: "Tue + Wed 8-9 AM local",
      window: "8-9 AM, before the day's site walks start",
    },
    {
      desk: "General Contractors",
      sub: "VP Ops · Dir. Project Controls",
      cells: [
        [58,82,76,62,52,34,30,48,62,56,38,20],
        [66,90,84,68,56,38,32,54,68,60,42,20],
        [64,88,82,66,54,36,30,52,66,58,40,18],
        [60,84,78,62,50,34,28,48,62,54,36,16],
        [38,58,52,42,34,22,18,32,44,40,24,12],
      ],
      peak: "Tue 8 AM local",
      window: "7-9 AM, before crews mobilize on site",
    },
    {
      desk: "Architecture & Engineering",
      sub: "Principals · construction admin leads",
      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 design 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" };
  };

  // ─── 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 for INGENIOUS the unit that compounds is projects live,
  // the unit that matters is files-processed-per-month, not the logo flag.
  // The compounding stages (running volume + lookalike loop) are the real ROI.
  const stack = [
    { stage:"Universe scored",       pool:"38,000", unit:"records",              delta:"-",                  who:"Universe + Signal",                 baseline:"3 weeks manual list build, instant here", color:"#9D4EDD" },
    { stage:"Signal-fit shortlist",  pool:"4,800",  unit:"high-fit accounts",    delta:"-87% from universe", who:"Signal Layer scoring",              baseline:"buyer list trimmed nightly",              color:"#9D4EDD" },
    { stage:"Contacted",             pool:"3,400",  unit:"this 30-day batch",    delta:"-29% to live touch", who:"AICRO Send + Connect",              baseline:"vs. 4-6 wks SDR ramp, day 1 live",        color:"#21A8F2" },
    { stage:"Engaged reply",         pool:"156",    unit:"all reply types",      delta:"4.6%",               who:"Outreach Agent personalization",    baseline:"3x lift vs. generic email",               color:"#21A8F2" },
    { stage:"Positive reply",        pool:"98",     unit:"interested",           delta:"62.8%",              who:"Voice-locked composer",             baseline:"benchmark PRR by buyer-type",             color:"#0E9F66" },
    { stage:"Demo booked",           pool:"24",     unit:"on INGENIOUS calendar",delta:"24.5%",              who:"Reply Agent, 2-times CTA",          baseline:"~4 min median, no admin lift",            color:"#0E9F66" },
    { stage:"Pilot / trial started", pool:"7",      unit:"running a live project",delta:"29.2%",             who:"AICRO Rounds, demo to trial trigger",baseline:"+118% vs. unmanaged book",                color:"#0E9F66" },
    { stage:"Closed customer",       pool:"2-3",    unit:"signed logos / mo",    delta:"~30% pilot-to-close",who:"INGENIOUS product, enterprise-proven",baseline:"the contract; expansion starts here",     color:"#FF8559" },
    { stage:"Projects live",         pool:"5-40",   unit:"projects / customer",  delta:"land and expand",    who:"Customer Success + Rounds nudges",  baseline:"seats and projects are where SaaS compounds",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 cohort, cheaper than the first", 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 above is the workflow. This is what compounds when it runs.</h2>
          <p>Two lenses on the same engine: <strong>when</strong> each INGENIOUS buyer responds, and <strong>how much</strong> compression every stage of the funnel 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 buyer-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>

        {/* ── (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 compounds for a platform like INGENIOUS is projects live on the system. The engine doesn&rsquo;t stop at the signed contract, it keeps surfacing nudges until the customer has rolled the platform across every project 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 = ["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: "PropTech revenue 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: "Built-world buyer fluency", vals: [1, 2, 1, 4], aicro: "RemoteLock + 5 active" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">12 / 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 by the same operator who scaled RemoteLock, Gumption, and Capitalize, calibrated for US owners, developers, owner&rsquo;s reps, GCs, and design firms.</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>
  );
}


// ─── ICP DATA — segment switcher ─────────────
const ICP_DATA = {
  owners_developers: {
    label: "Owners & Developers",
    sub: "US · multi-project portfolios",
    summary: "Developers booking demos within the week.",
    summaryBody: "Owners and developers running multiple active projects are the strongest pool. The opener that converts is an active development pipeline plus a recent VP Construction or project-controls hire on LinkedIn, a team scaling project volume on a stack that does not connect the field to the budget. A director of development at a national multifamily developer 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 firms 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 | Active development pipeline | Owners & Developers", sent:"4,820", contacted:"3,140", connReq:"-", connAcc:"-", positives:"38", posRate:"28.4%", accept:"-" },
      { type:"li", name:"LI | VP Construction | Multi-Project Developers", sent:"312", contacted:"264", connReq:"264", connAcc:"122", positives:"24", posRate:"61.1%", accept:"46.2%", active:true },
      { type:"em", name:"EM | Project-controls hire signal | Developers", sent:"3,240", contacted:"2,118", connReq:"-", connAcc:"-", positives:"18", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Director of Development | Regional Owners", sent:"148", contacted:"122", connReq:"122", connAcc:"58", positives:"10", posRate:"52.6%", accept:"47.5%" },
      { type:"em", name:"EM | New fund close · pipeline jump | Owners", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"4", posRate:"19.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | VP Construction | Multi-Project Developers",
      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 · national multifamily developer · VP Construction", date:"May 18", tag:"Pilot Started", booked:true },
        { name:"Lina Mansour · regional owner-developer · Dir. Development", date:"May 17", tag:"Demo Booked", booked:true },
        { name:"Maria Velez · multi-state developer · 14 active projects", date:"May 16", tag:"Interested" },
        { name:"Brett Coleman · industrial developer · scaling pipeline", date:"May 15", tag:"Demo Booked", booked:true },
        { name:"Sofie Khan · mixed-use developer · new fund close", date:"May 14", tag:"Interested" },
        { name:"Reza Karimi · build-to-rent developer · Dir. Construction", date:"May 13", tag:"Interested" },
        { name:"Marcus Pace · regional developer · 9 active projects", date:"May 12", tag:"Interested" },
      ],
    },
  },
  owners_reps: {
    label: "Owner's Reps / PM Firms",
    sub: "Principals · program managers",
    summary: "Principals responding to control-and-visibility angle.",
    summaryBody: "Owner's-rep and project management firms whose entire product is budget and schedule control across client projects. The opener is the platform as the thing they sell, delivered on day one, one source of truth they run every owner project on. Principals and directors of project management are the right title tier. Illustrative pool projection.",
    kpis: { sent:"6,140", positives:"28", meetings:"6", pipeline:"11 firms 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 | Control + visibility | Owner's Rep + PM Firms", sent:"2,140", contacted:"1,388", connReq:"-", connAcc:"-", positives:"14", posRate:"24.0%", accept:"-" },
      { type:"li", name:"LI | Principal / Dir. PM | Owner's Rep Firms", sent:"148", contacted:"112", connReq:"112", connAcc:"48", positives:"8", posRate:"52.9%", accept:"42.9%", active:true },
      { type:"em", name:"EM | New client-project win | PM Consultancies", sent:"1,820", contacted:"1,124", connReq:"-", connAcc:"-", positives:"6", posRate:"19.4%", accept:"-" },
    ],
    drawer: {
      name: "LI | Principal / Dir. PM | Owner's Rep Firms",
      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 · owner's-rep firm · Principal", date:"May 18", tag:"Demo Booked", booked:true },
        { name:"Priya Anand · program management consultancy · Director", date:"May 16", tag:"Interested" },
        { name:"Dale Foster · independent owner's rep · founder", date:"May 14", tag:"Interested" },
        { name:"Nadia Cole · cost + PM consultancy · Principal", date:"May 13", tag:"Demo Booked", booked:true },
      ],
    },
  },
  general_contractors: {
    label: "General Contractors",
    sub: "VP Ops · project controls",
    summary: "Project-controls leaders responding to margin angle.",
    summaryBody: "General contractors and construction managers running multiple active jobs, where change-order disputes and cost overruns hit margin directly. The trigger is a project-volume jump or a project-controls hire plus a stack gap (accounting only, no connected field-to-office platform). VP Operations and directors of project controls are the right title tier. Illustrative pool projection.",
    kpis: { sent:"5,420", positives:"22", meetings:"5", pipeline:"9 firms 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 | Change-order + margin | Commercial GCs", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"10", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | VP Ops / Project Controls | Commercial GCs", sent:"148", contacted:"122", connReq:"122", connAcc:"54", positives:"8", posRate:"58.3%", accept:"44.3%", active:true },
      { type:"em", name:"EM | Project-volume jump · multi-job | CM Firms", sent:"1,420", contacted:"918", connReq:"-", connAcc:"-", positives:"4", posRate:"21.1%", accept:"-" },
    ],
    drawer: {
      name: "LI | VP Ops / Project Controls | Commercial GCs",
      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 · regional GC · VP Operations", date:"May 18", tag:"Demo Booked", booked:true },
        { name:"Sanjay Mehta · commercial CM firm · Dir. Project Controls", date:"May 16", tag:"Interested" },
        { name:"Grace Holloway · mid-market GC · 18 active jobs", date:"May 15", tag:"Interested" },
        { name:"Viktor Salas · multi-state builder · 1,200 subs managed", date:"May 13", tag:"Pilot Started", booked:true },
      ],
    },
  },
  architecture_engineering: {
    label: "Architecture & Engineering",
    sub: "Principals · construction admin",
    summary: "A&E principals responding to RFI-turnaround angle.",
    summaryBody: "Architecture and engineering firms managing RFIs, submittals, and construction administration on every project they design. The message leads with the RFI-and-submittal-turnaround wedge, one platform across construction admin on every active project. Principals and construction-administration leads are the title tier. Illustrative pool projection.",
    kpis: { sent:"8,820", positives:"42", meetings:"9", pipeline:"16 firms 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 | RFI + submittal turnaround | A&E Firms", sent:"3,140", contacted:"2,018", connReq:"-", connAcc:"-", positives:"22", posRate:"26.4%", accept:"-" },
      { type:"li", name:"LI | Principal / Const. Admin | A&E Firms", sent:"212", contacted:"180", connReq:"180", connAcc:"82", positives:"14", posRate:"56.0%", accept:"45.6%", active:true },
      { type:"em", name:"EM | New major project win | Engineering Firms", sent:"2,420", contacted:"1,612", connReq:"-", connAcc:"-", positives:"6", posRate:"22.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | Principal / Const. Admin | A&E Firms",
      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 · architecture firm · construction admin lead", date:"May 18", tag:"Pilot Started", booked:true },
        { name:"Beau Carter · multidisciplinary A&E · Principal", date:"May 17", tag:"Demo Booked", booked:true },
        { name:"Imani Clarke · engineering firm · Dir. Const. Admin", date:"May 15", tag:"Interested" },
        { name:"Felipe Duarte · design firm · project architect", 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 / ingenious / 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 started, end to end." },
    { src:"uploads/pasted-1777222050657-0.png", label:"Reply Agent in Slack",       caption:"A VP Construction's reply hits Slack within minutes, classified, response drafted, demo booked. An INGENIOUS rep approves before send." },
    { src:"uploads/pasted-1777222220819-0.png", label:"Sales Action · AICRO Rounds",caption:"A regional GC 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)"}}>07 / 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 buyer-type pools (owners &amp; developers, owner&rsquo;s reps, GCs, A&amp;E firms) across US construction. 6 signal layers that fire when a firm needs INGENIOUS. Quarterly refresh tuned against the profiles that convert.", delivs:["4 buyer-type ICP cards","6-source signal architecture","Pool-concentration scorecard","Quarterly recalibration"] },
    { l:"Playbooks", t:"Productized SOPs", d:"Discovery scripts and demo flows for VP Construction, owner&rsquo;s-rep principals, GC project-controls leaders, and A&amp;E construction-admin leads. ROI framing: hours back per day, fewer change-order disputes. Horizontal platform positioning vs single-point tools.", delivs:["Discovery script · per buyer-type","Demo flow + ROI walkthrough","Positioning battlecards","Onboarding checklist"] },
    { l:"Comp", t:"Rep Comp Structure", d:"New-logo accelerators tuned to INGENIOUS&rsquo;s SaaS model. Pilot-to-paid SPIFF. Override design for the sales bench you hire next.", delivs:["Ramp plan · 90/180/365","Pilot activation SPIFF","New-logo accelerator","Board-defendable model"] },
    { l:"Onboarding", t:"Operator Cadence", d:"Monday signal review with Nick and the team. Wednesday reply triage. Friday MBR. Quarterly pipeline math run in your Slack.", delivs:["Monday signal review","Wednesday reply triage","Friday MBR","QBR + board pack"] },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">08 / 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 owners, developers, owner&rsquo;s reps, GCs, and design firms 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">10 / 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 (Nick + 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 buyer-type pools (owners &amp; developers, owner&rsquo;s reps, GCs, A&amp;E firms), a live signal layer, booked demos on your reps&rsquo; calendars, and a fully-instrumented funnel. The in-house build delivers a sales team that is still ramping.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Case studies — 5 ─────────────────
function CaseStudies() {
  const cases = [
    {
      co: "RemoteLock",
      stage: "PropTech · same playbook",
      sector: "PropTech · Smart Access SaaS",
      quote: "Smart-access SaaS selling into real estate operators. RemoteLock proves the AICRO built-world outbound discipline: operator-to-operator messaging that gets named national operators replying by name. The end-buyer differs from INGENIOUS&rsquo;s owners and GCs, but the cold-outbound muscle into property and construction operators transfers directly.",
      attr: "RemoteLock · PropTech engagement",
      systems: ["Operator-to-Operator Outbound", "Vertical Segmentation", "Stack-Specific Targeting", "Reply Triage + Routing"],
      metrics: [
        { v: "47%", l: "LinkedIn PRR", live: true },
        { v: "Property", l: "operator buyer" },
        { v: "Named", l: "operators 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 INGENIOUS: an AI-enabled, vertical software product with product-market fit that still needs a net-new pipeline engine above it.",
      attr: "Henry AI · AI platform for CRE",
      systems: ["Lookalike Targeting", "Operator-to-Broker Outbound", "Signal-Based Sequencing", "Reply Triage"],
      metrics: [
        { v: "AI for CRE", l: "capital markets" },
        { v: "Outbound", l: "run by AICRO" },
        { v: "Same play", l: "as INGENIOUS", 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">09 / Proof</span>
          <h2>We&rsquo;ve taken AI and PropTech to market in the built world. 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 vertical software product in front of the owners, operators, and developers who actually move. Henry AI and RemoteLock are the closest reads on INGENIOUS.</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 + INGENIOUS principals (Nick / team, 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">11 / 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)"}}>13 / Custom demo + Q&amp;A</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>Nick, the custom demo is built. Let&rsquo;s walk it together.</h2>
            <p>We&rsquo;ve already built the INGENIOUS instance. The orchestration layer is live: four buyer-type pools graded (owners &amp; developers, owner&rsquo;s reps, GCs, A&amp;E firms), signals firing across US construction, 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 buyer-type pools. You see what we&rsquo;d send to a VP Construction, an owner&rsquo;s-rep principal, a GC project-controls leader, and an A&amp;E construction-admin lead 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">INGENIOUS.BUILD · PROPOSAL · 2026-06-15</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:"Owners & Developers", stat:"12K+", statLbl:"US active owner-developers", frag:"Real estate developers and capital-project owners running multiple ground-up and renovation projects at once. They carry the budget, change-order, and draw risk on every project, and most still reconcile it across spreadsheets and accounting software that never talk to the field.", buyer:"VP Construction / Director of Development" },
    { v:"Owner's Reps / PM Firms", stat:"3,500+", statLbl:"US owner's-rep + PM consultancies", frag:"Project management firms and owner's representatives who run capital projects on behalf of owners. Their entire product is control and visibility, and they are judged on the budget and schedule discipline a connected platform delivers on day one.", buyer:"Principal / Director of Project Management" },
    { v:"General Contractors", stat:"60K+", statLbl:"US commercial GC + CM firms", frag:"General contractors and construction managers coordinating field operations, subs, and owner reporting across active jobs. Change-order disputes and cost overruns hit their margin directly, which is exactly the pain a single source of truth removes.", buyer:"VP Operations / Director of Project Controls" },
    { v:"Architecture & Engineering", stat:"20K+", statLbl:"US A&E firms doing construction admin", frag:"Architecture and engineering firms managing RFIs, submittals, and construction administration on every project they design. They live in the same documents and approvals INGENIOUS already organizes, and they influence the platform the whole project team adopts.", buyer:"Principal / Construction Administration Lead" },
  ];
  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 INGENIOUS can win across US construction and development. 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}}>
              Tens of thousands of US owners, developers, owner&rsquo;s reps, GCs, and design firms, leaner than their project load, running budgets and change orders across spreadsheets and disconnected accounting software. They will not all find INGENIOUS 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:"Hines",
      vert:"Owners & Developers",
      size:"Houston, TX · global developer · $90B+ AUM",
      why:"Active 2026 US development pipeline across multifamily, industrial, and life sciences, with project-controls roles open.",
      how:"Standardize budgets, commitments, and change orders on INGENIOUS across every active US project, one source of truth.",
      next:"A multi-asset developer running projects in parallel is the strongest land-and-expand argument there is.",
    },
    {
      co:"Howard Hughes Holdings",
      vert:"Owners & Developers",
      size:"The Woodlands, TX · master-planned developer",
      why:"Large active development pipeline across master-planned communities, reconciling cost and draws across disconnected tools per project.",
      how:"Run one project as a pilot, prove the change-order and draw discipline, then roll across the development pipeline.",
      next:"Every new ground-up start becomes another project live on the platform.",
    },
    {
      co:"Project Management Advisors",
      vert:"Owner's Reps / PM Firms",
      size:"Chicago, IL · owner's rep + PM",
      why:"Owner's-rep and project-management firm whose entire value is budget and schedule control across client projects.",
      how:"INGENIOUS becomes the platform they run owner projects on, the control and visibility they sell, delivered.",
      next:"One firm adoption pulls the platform into every owner they advise.",
    },
    {
      co:"DPR Construction",
      vert:"General Contractors",
      size:"Redwood City, CA · employee-owned national GC",
      why:"Tech-forward national builder where change-order disputes and cost overruns hit margin directly.",
      how:"Pilot project-financials and field-to-office reporting on one region, measure dispute and overrun reduction.",
      next:"Margin moves with cost control at this volume. A pilot proves it, then it scales across districts.",
    },
    {
      co:"Hensel Phelps",
      vert:"General Contractors",
      size:"Greeley, CO · employee-owned · national CM/GC",
      why:"Large public and institutional project portfolio with heavy owner-reporting and closeout requirements.",
      how:"Drop INGENIOUS into the project-controls workflow on one institutional project, measure hours back per week.",
      next:"Institutional owners reward the GC with the cleanest reporting. The platform is the reporting.",
    },
    {
      co:"HKS",
      vert:"Architecture & Engineering",
      size:"Dallas, TX · global architecture firm",
      why:"High-volume RFI, submittal, and construction-administration load across every project they design.",
      how:"Run construction administration for one major project on INGENIOUS, measure RFI and submittal turnaround.",
      next:"The design firm influences which platform the whole project team standardizes on.",
    },
  ];
  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 firm carries a public signal, a specific way INGENIOUS 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 firms. Illustrative angles. In week one we turn this into a scored, deduped A-list across all four segments with verified public signals (new development pipelines and fund closes, project-controls and VP Construction hires, GC and developer M&A, major permit filings), refreshed as new signals fire.
        </div>
      </div>
    </section>
  );
}

// ─── Section: ICP Launch Map ──────────────────────────────
// A concentrated launch map: four tiers, named firms, real US
// locations, decision-maker title, and the wedge to open with.
function ICPLaunchMap() {
  const tiers = [
    {
      tier:"T1",
      label:"Owners & Developers",
      color:"#21A8F2", tint:"#E9F5FE",
      universe:"~12,000 US active developers",
      buyer:"VP Construction / Dir. of Development",
      wedge:"Active development pipeline plus a project-controls or VP Construction hire. The budget and change-order load is being felt right now.",
      firms:[
        { n:"Hines",                   loc:"Houston, TX · $90B+ AUM",         tag:"already on A-list" },
        { n:"Howard Hughes Holdings",  loc:"The Woodlands, TX · master-planned dev", tag:"already on A-list" },
        { n:"Toll Brothers",           loc:"Fort Washington, PA · national" },
        { n:"Lennar",                  loc:"Miami, FL · national homebuilder" },
        { n:"Camden Property Trust",   loc:"Houston, TX · multifamily developer" },
        { n:"The Bozzuto Group",       loc:"Greenbelt, MD · develop + manage" },
      ],
    },
    {
      tier:"T2",
      label:"Owner's Reps / PM Firms",
      color:"#9D4EDD", tint:"#F4ECFE",
      universe:"~3,500 US owner's-rep + PM firms",
      buyer:"Principal · Director of PM",
      wedge:"Their entire product is budget and schedule control. The platform is the thing they sell to owners, delivered on day one.",
      firms:[
        { n:"Project Management Advisors",   loc:"Chicago, IL · owner's rep", tag:"already on A-list" },
        { n:"MGAC",                          loc:"Washington, DC · owner's rep" },
        { n:"Rider Levett Bucknall",         loc:"Phoenix, AZ · cost + PM" },
        { n:"Gardiner & Theobald",           loc:"New York, NY · PM + cost" },
        { n:"DBI Projects",                  loc:"New York, NY · owner's rep + PM" },
      ],
    },
    {
      tier:"T3",
      label:"General Contractors",
      color:"#0E9F66", tint:"#E5F9F0",
      universe:"~60,000 US commercial GC + CM firms",
      buyer:"VP Ops / Dir. Project Controls",
      wedge:"Change-order disputes and cost overruns hit margin directly. One connected source of truth is the fix, and the margin math is clean.",
      firms:[
        { n:"DPR Construction",              loc:"Redwood City, CA · employee-owned", tag:"already on A-list" },
        { n:"Hensel Phelps",                 loc:"Greeley, CO · employee-owned",      tag:"already on A-list" },
        { n:"McCarthy Building Companies",   loc:"St. Louis, MO · employee-owned" },
        { n:"Suffolk Construction",          loc:"Boston, MA · national GC" },
        { n:"Mortenson",                     loc:"Minneapolis, MN · national builder" },
        { n:"Gilbane Building Company",      loc:"Providence, RI · family-owned" },
      ],
    },
    {
      tier:"T4",
      label:"Architecture & Engineering",
      color:"#FF8559", tint:"#FFEEE5",
      universe:"~20,000 US A&E firms",
      buyer:"Principal / Construction Admin Lead",
      wedge:"High RFI and submittal load on every project. They influence which platform the whole project team standardizes on.",
      firms:[
        { n:"HKS",                           loc:"Dallas, TX · global architecture", tag:"already on A-list" },
        { n:"Gensler",                       loc:"San Francisco, CA · global architecture" },
        { n:"HDR",                           loc:"Omaha, NE · employee-owned A&E" },
        { n:"SmithGroup",                    loc:"Detroit, MI · architecture + eng" },
        { n:"HOK",                           loc:"St. Louis, MO · global design" },
        { n:"Stantec",                       loc:"Edmonton, AB · A&E · US ops" },
      ],
    },
  ];
  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 accounts</span>
          <h2>The right ICP to open with, named and tiered.</h2>
          <p>A concentrated map for the launch. Four tiers, decision-maker title per tier, the wedge to open with, and named firms we&rsquo;d work in week one. Total reachable universe across the four tiers: <strong>~95,000 US firms</strong>. Live signals refresh the list weekly once we are live; the enterprise-customer expansion vector runs in parallel.</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 (VP Construction name, principal name, project-controls lead name). Pattern-matched email plus LinkedIn approach paths. Tier&nbsp;1 + Tier&nbsp;3 get the first 60 days of send capacity (~75 inboxes split 60/40), Tier&nbsp;2 + 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}}>Enterprise expansion: JLL, Cushman, Turner, and Greystar already run on it. Warm paths into their project teams and partner networks, 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/>
      <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:"owners_developers",       label:"Owners & Developers"},
            {value:"owners_reps",             label:"Owner's Reps / PM Firms"},
            {value:"general_contractors",     label:"General Contractors"},
            {value:"architecture_engineering",label:"Architecture & Engineering"},
          ]}
          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/>);