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

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

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

// ─── Nav ─────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="nav-left">
          <a href="#" className="nav-logo">
            <span className="nav-logo-text">AICRO</span>
            <span className="nav-tag">Plum Proposal</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">Why now</a>
            <a href="#universe">Who buys first</a>
            <a href="#orchestration">How we run it</a>
            <a href="#pricing">Packaging</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">Book 30 minutes</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 Brad Ledford &middot; Foundri Studio &middot; September 22, 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          Brad, you shipped Plum in three weeks.<br/>
          The product is not the constraint.<br/>
          <span style={{color:"#21A8F2"}}>The constraint is how many agent-heavy teams ever try it.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:920}}>
          You said it on our call: you are a builder, you do not enjoy marketing, and you need something that tests the market, puts a price on it, and writes the story in language that is not your technical speak. That is the whole job here. Plum does not need a brand campaign and it does not need you to become a marketer. It needs a narrow list of teams who already run agents, a message that sounds like you, and enough real conversations to tell you whether this is a business or a good tool. We run that motion. You keep building. Everything we produce, the list, the copy, the infrastructure, is yours whether we work together for three months or three years.
        </p>
        <div className="hero-cta-row">
          <a href="#thesis" className="btn btn-primary btn-lg">See the thinking &rarr;</a>
          <a href="#economics" className={dark ? "btn btn-outline-light btn-lg" : "btn btn-ghost btn-lg"}>What it costs</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:"3 weeks", l:"idea to a working product \u00b7 Plum"},
            {v:"1 to 20", l:"team size where this lands first"},
            {v:"0 to $70M", l:"marketplace Doug scaled as CRO"},
            {v:"$5 to $7K", l:"right-sized 3-month motion"},
          ].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>
  );
}

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">AICRO 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 \u00b7 THE HARD PART IS DONE",
      stat: "3 weeks",
      statLbl: "idea to a product you can demo",
      title: "You already cleared the bar most people never reach.",
      body: "Plum did not exist three weeks ago and I was the first person outside your head to see it run. That is the part that cannot be bought. The risk now is the builder default, which is to keep adding before anyone outside has told you what they would pay for. Everything below is designed to get that answer fast and cheaply, so the next three months of building are pointed at what the market actually asked for.",
      source: "Source: AICRO product overview call &middot; September 15, 2026",
    },
    {
      tag: "02 \u00b7 HOW IT GETS IN",
      stat: "1 to 20",
      statLbl: "team size that adopts first",
      title: "Nobody sweeps Zoom off the table. Teams adopt around it.",
      body: "Your read on the call was right, and it is the same path Slack took. A person inside a 30 or 100 person company cannot replace the company standard, but a small team can pick their own tool for their own work. So Plum does not fight for the client call. It wins the internal standup, the working session, the call where the agents matter, and it spreads from there. That framing also decides the list: small teams with real autonomy, not enterprise IT.",
      source: "Source: AICRO product overview call &middot; September 15, 2026",
    },
    {
      tag: "03 \u00b7 THE GAP",
      stat: "Agents",
      statLbl: "participating, not just transcribing",
      title: "The incumbents shipped note takers, not participants.",
      body: "Every meeting platform now allows a bot that listens and writes a summary. What none of them made easy is an agent that is actually in the room, with access, doing work, including a model a team runs themselves. You said the message should be that the trend is moving and the gorillas are not moving fast enough. That is the right message. It is a category story rather than a grudge, and it does not depend on anyone agreeing that they hate Zoom.",
      source: "Source: AICRO product overview call &middot; September 15, 2026",
    },
    {
      tag: "04 \u00b7 THE UNLOCK",
      stat: "$0",
      statLbl: "Plum's price today",
      title: "Packaging is the decision in front of you, not distribution.",
      body: "Free is the right opening move only if you decide now what pulls a team off it. We launched Crexi free and told the market we would be free, which was survivable because it came with the capital to wait years. Without that, free has to convert. A tier model with a clear carrot at each step is the difference between a tool people enjoy and a business that compounds. Section 04 is my recommendation for where those lines sit.",
      source: "Source: AICRO operator experience &middot; Crexi",
    },
  ];
  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 works. Nobody knows it exists.</h2>
          <p>Plum is three weeks old, it runs, and it solves a problem its own builder had. What it does not have yet is a price, a named audience, or a single conversation with someone who is not a friend. Four things make closing that gap the highest-leverage move you can make this quarter, and none of them require you to become a marketer.</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 style={{fontSize:11,color:"var(--slate-400)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em",marginTop:"auto",paddingTop:8}}>{d.source}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:32,padding:"24px 28px",background:"var(--shark)",borderRadius:14,color:"#fff"}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600,marginBottom:12}}>The obvious question, answered first</div>
          <div style={{fontSize:18,lineHeight:1.5,color:"#fff",fontWeight:500,maxWidth:940}}>
            &ldquo;I hate marketing and I am one person. Is this going to become a job I did not sign up for?&rdquo; No. We build the list, the infrastructure and the sequences, and we draft every reply before it reaches you. What we need from you is 30 minutes a week and your voice on the message, because a builder writing to builders is the entire advantage here. When a real conversation starts, it is you and them. That is the only part we will not do for you, and it is the part you are best at.
          </div>
        </div>
      </div>
    </section>
  );
}

function Orchestration() {
  const inputs = [
    { lbl:"Your ICP map", sub:"4 team types · agent-heavy, 1 to 20 people" },
    { lbl:"Public web", sub:"LinkedIn, state bar lists, MLS rosters, news" },
    { lbl:"Stack + intent", sub:"Meeting stack, note taker and agent usage" },
    { lbl:"Event rosters", sub:"AI Engineer, MCP and agent meetups, YC demo days" },
  ];
  const signals = [
    { lbl:"Agent limit complaint, in public", color:"#21A8F2" },
    { lbl:"Transaction-attorney hire", color:"#21A8F2" },
    { lbl:"New US/UAE office opening", color:"#9D4EDD" },
    { lbl:"New MCP server or harness shipped", color:"#9D4EDD" },
    { lbl:"No closing-software detected", color:"#0E9F66" },
    { lbl:"AI team hiring · 1 to 20 headcount", 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 technical founder on LinkedIn and a call on your calendar, step by step, with the systems doing the work named.</p>
        </div>

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

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

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

          {/* Step 3: Per-row composer */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="3" label="Per-row composer · LLM + your voice library"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>every line traceable to the signal that triggered it</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:0,border:"1px solid var(--mist)",borderRadius:12,overflow:"hidden",marginBottom:8}}>
            <div style={{padding:"16px 18px",background:"#fff",borderRight:"1px solid var(--mist)"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"var(--slate-500)",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>INPUT</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>One broker row: role, firm, AUM, tenure, recent activity, top signal fired</div>
            </div>
            <div style={{padding:"16px 18px",background:"#F6F8FB",borderRight:"1px solid var(--mist)",position:"relative"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"#21A8F2",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>COMPOSE</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>Picks signal · picks proof · writes relevance hook · matches your 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 you. Nothing ships without your sign-off in the first month, because the whole edge here is that it sounds like a builder, not a vendor.
          </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}}>The call lands on your 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 technical founder or team lead who already runs agents,<br/>on your 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 call and signed team feeds back into the seed list as a lookalike. The signal gets more accurate every month. The buyer profile sharpens against the teams Plum actually converts, agency versus product team, hosted model versus local.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
function CostCompare() {
  return (
    <section className="section section-soft" id="economics">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">06 / Economics</span>
          <h2>$5,000 to $7,000 a month. Three months. One audience.</h2>
          <p>Our engagements usually run $10,000 to $20,000 a month, and that version is built for a company with a sales team, several audiences and a CRM to wire in. That is not what a three-week-old product needs. This is the right-sized version, and the scope is smaller on purpose rather than discounted.</p>
        </div>
        <div className="cost-grid">
          <div className="cost-card">
            <div className="cost-eyebrow">Do it yourself</div>
            <h3>Your time, or a first sales hire.</h3>
            <p style={{color:"var(--slate-500)",fontSize:14,marginTop:6}}>The version where marketing becomes your job.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">First SDR or growth hire, loaded (market range)</span><span className="val">$90 to $130K / yr</span></div>
              <div className="cost-list-row"><span className="label">Tool stack: data, sending, enrichment</span><span className="val">$12 to $20K / yr</span></div>
              <div className="cost-list-row"><span className="label">Your build time, redirected</span><span className="val">the real cost</span></div>
              <div className="cost-list-row"><span className="label">Time to a repeatable motion</span><span className="val">6 to 9 months</span></div>
              <div className="cost-list-row total"><span className="label">Before you learn anything</span><span className="val">two quarters</span></div>
            </div>
            <div className="cost-meta">The trap is not the money. It is that Plum stops shipping while you learn deliverability, and you still do not know whether anyone will pay.</div>
          </div>
          <div className="cost-card aicro">
            <div className="cost-eyebrow">AICRO &middot; 3-month test</div>
            <h3>$5,000 to $7,000 / month.</h3>
            <p style={{color:"rgba(255,255,255,.65)",fontSize:14,marginTop:6}}>Doug as operator-CRO, plus the delivery team and the platform. One bill.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">Months 1, 2, 3</span><span className="val">$5,000 to $7,000 / mo</span></div>
              <div className="cost-list-row"><span className="label">Paid three months up front</span><span className="val">our only discount</span></div>
              <div className="cost-list-row"><span className="label">First live sequences</span><span className="val">Day 21</span></div>
              <div className="cost-list-row"><span className="label">Your time commitment</span><span className="val">30 min / week</span></div>
              <div className="cost-list-row total"><span className="label">What you keep either way</span><span className="val">list, copy, infrastructure</span></div>
            </div>
            <div className="cost-meta">Deliberately not included: multiple audiences, CRM integration, a phone motion, paid media. Those get added when the first motion earns them, not before. If a longer engagement suits you better, there is room to put more work into it rather than less money.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PlumPricing() {
  const tiers = [
    {
      tier: "GOOD", name: "Free", price: "$0", accent: "#94A3B8",
      lines: ["One standing room", "Two agents in a call", "Session length cap"],
      note: "Enough to feel the difference. Not enough to run a team on.",
    },
    {
      tier: "BETTER", name: "Team", price: "$19", unit: "per user / month", accent: "#21A8F2",
      lines: ["Unlimited agents in the call", "Standing rooms per team", "Transcript access for agents"],
      note: "The everyday tier. Priced to sit next to a normal meeting seat, not above it.",
    },
    {
      tier: "BEST", name: "Pro", price: "$39", unit: "per user / month", accent: "#0E9F66",
      lines: ["Harness and agent API access", "Local model support", "Admin and workspace controls"],
      note: "Where your real differentiation lives, and where the agent-heavy teams land.",
    },
  ];
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>04 / Packaging</span>
          <h2>Good, better, best, with a path off free.</h2>
          <p>This is a starting point for the conversation, not a verdict. You have not priced Plum yet, and the market will move these numbers. What matters is the shape: a free tier that proves the idea, a team tier that reads as ordinary, and a top tier that is priced like developer infrastructure rather than a meeting seat.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:18}}>
          {tiers.map((t,i) => (
            <div key={i} className="card" style={{padding:26,display:"flex",flexDirection:"column",gap:12,borderTop:`4px solid ${t.accent}`}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:t.accent,textTransform:"uppercase",fontWeight:600}}>{t.tier}</div>
              <div style={{fontSize:17,fontWeight:600,color:"var(--shark)"}}>{t.name}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:10,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:38,fontWeight:600,letterSpacing:"-0.02em",color:"var(--shark)",lineHeight:1}}>{t.price}</span>
                <span style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.05em",textTransform:"uppercase"}}>{t.unit || ""}</span>
              </div>
              <ul style={{margin:0,paddingLeft:18,fontSize:13,color:"var(--slate-500)",lineHeight:1.6}}>
                {t.lines.map((l,j) => <li key={j} style={{marginBottom:4}}>{l}</li>)}
              </ul>
              <div style={{marginTop:"auto",paddingTop:10,fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5}}>{t.note}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:18,display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          <div className="card" style={{padding:26}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:600,marginBottom:10}}>The two carrots</div>
            <div style={{fontSize:14.5,color:"var(--slate-500)",lineHeight:1.6}}>
              Free to Team is the agent cap. A team that wants three agents in a call has already told you it is worth paying for. Team to Pro is programmatic access, which is the part nobody else is offering and the part a builder will pay for without a negotiation.
            </div>
          </div>
          <div className="card" style={{padding:26,background:"var(--shark)"}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600,marginBottom:10}}>The anchor question</div>
            <div style={{fontSize:14.5,color:"#fff",lineHeight:1.6}}>
              Do not let Plum get priced next to a meeting seat by default. Team can live there. Pro should be compared to the tooling budget, because a harness with API access and local model support is infrastructure. The comparison you allow is the price you get.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Case studies ─────────────────
function CaseStudies() {
  const cases = [
    {
      co: "Capitalize",
      stage: "AI-native platform",
      sector: "AI + Data Platform",
      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 &middot; Co-founder",
      systems: ["Signal-First Outbound", "End-to-End Revenue Engineering", "HubSpot GTM build", "CRO-led enablement"],
      metrics: [
        { v: "346", l: "meetings booked", live: true },
        { v: "~$1.1M", l: "attributed pipeline" },
        { v: "30.4%", l: "email positive reply rate" },
      ],
    },
    {
      co: "RemoteLock",
      stage: "SaaS &middot; founder-adjacent buyer",
      sector: "Smart Access SaaS",
      quote: "A software product selling into operators who are not waiting for a vendor call. The number that matters for Plum is the LinkedIn one. Operator-to-operator messages, sent from a real person, get answered at a rate cold email never reaches.",
      attr: "RemoteLock &middot; AICRO engagement",
      systems: ["Operator-to-Operator Outbound", "Vertical Segmentation", "Stack-Specific Targeting", "Reply Triage"],
      metrics: [
        { v: "47%", l: "LinkedIn positive reply rate", live: true },
        { v: "1 : 19", l: "messages to positive" },
        { v: "Founder", l: "identity on the send" },
      ],
    },
    {
      co: "Henry AI",
      stage: "AI-native platform &middot; active since Apr 2026",
      sector: "AI Platform",
      quote: "An AI-native product with real usage that still needed a net-new pipeline above it. Same shape as Plum: the software works, and the ceiling is how many of the right people ever try it. AICRO runs their cold outbound.",
      attr: "Henry AI &middot; active AICRO client",
      systems: ["Lookalike Targeting", "Signal-Based Sequencing", "Per-Row Personalization", "Reply Triage"],
      metrics: [
        { v: "AI-native", l: "product, like yours", live: true },
        { v: "Outbound", l: "run end to end by AICRO" },
        { v: "Apr 2026", l: "client since" },
      ],
    },
  ];
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">05 / Proof</span>
          <h2>We take AI-native products to market for a living.</h2>
          <p>Three engagements that match your shape. A product that works, a founder who would rather build than sell, and a pipeline that had to be manufactured rather than waited for. Every number here comes from the client record, not a case study page.</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: "Positioning + packaging",
      desc: "The message in your voice, the tier model tested on real buyers",
      bars: [
        { left: 0, width: 20, label: "MESSAGE + TIERS", cls: "amber" },
        { left: 20, width: 80, label: "TESTED IN LIVE CONVERSATIONS", cls: "sky" },
      ],
      delivs: [
        { left: 8, label: "Day 10 · tiers set" },
        { left: 20, label: "Day 21 · message live" },
        { left: 58, label: "Day 60 · revised" },
      ],
    },
    {
      name: "Sending infrastructure",
      desc: "Off your primary domain · two domains, two inboxes each",
      bars: [
        { left: 0, width: 18, label: "DOMAIN WARM-UP", cls: "amber" },
        { left: 18, width: 82, label: "LIVE SEQUENCES + DAILY MONITORING", cls: "sky" },
      ],
      delivs: [
        { left: 12, label: "Day 14 · warm" },
        { left: 20, label: "Day 21 · live" },
        { left: 58, label: "Day 60 · tuned" },
      ],
    },
    {
      name: "Named list + signals",
      desc: "Agent-heavy teams · scored, prioritized, refreshed",
      bars: [
        { left: 0, width: 14, label: "LIST BUILD", cls: "amber" },
        { left: 14, width: 86, label: "SIGNALS FEED THE SEQUENCE", cls: "sky" },
      ],
      delivs: [
        { left: 10, label: "Day 14 · list live" },
        { left: 28, label: "Day 30 · signals on" },
        { left: 70, label: "Day 70 · refresh" },
      ],
    },
    {
      name: "Founder-led replies",
      desc: "Drafted for you · 30 minutes a week from Brad",
      bars: [
        { left: 0, width: 100, label: "YOU IN THE ROOM · 30 MIN WEEKLY", cls: "shark" },
      ],
      delivs: [
        { left: 22, label: "Day 21 · first replies" },
        { left: 48, label: "Day 45 · honest read" },
        { left: 86, label: "Day 90 · decision" },
      ],
    },
  ];
  return (
    <section className="section section-soft" id="timeline">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">07 / The first 90 days</span>
          <h2>Three months, then an honest decision.</h2>
          <p>Email and LinkedIn run in parallel under one operator. Ninety days is long enough to know whether the message lands and short enough that you have not bet the company on it.</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 replies</span></div>
            <div className="col">Day 60<span className="day">Message tuned</span></div>
            <div className="col">Day 90<span className="day">Decision</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)"}}>08 / Next step</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>Brad, let&rsquo;s walk the list together.</h2>
            <p>Thirty minutes. We go through who I would put on the first list, where I would set the tiers, and what the first sequence would actually say in your words. If the shape is right, we start. If it is not, you keep the plan and the pricing work, and I have enjoyed the conversation either way. And send the Plum invite. I will use it.</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"}}>
                Pick a time &rarr;
              </a>
              <span style={{fontSize:13,color:"rgba(255,255,255,0.65)",lineHeight:1.5,flex:1,minWidth:280}}>
                No deck. We work the list, the tiers, and the first message live, and you leave with the plan whether or not you hire us.
              </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 &middot; doug@aicro.co
            </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">PLUM · PROPOSAL · 2026-09-22</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:"AI dev shops and consultancies", stat:"Peers", statLbl:"people who build what you build", frag:"Small studios shipping agent work for clients, running several calls a day with their own tooling in the room. They understand the product in one sentence because they have hit the same wall. This is the warmest opening on the list and the easiest call you will take.", buyer:"Founder / Principal" },
    { v:"Builders on MCP and harnesses", stat:"MCP", statLbl:"agent plumbing, in public", frag:"Technical founders and lead engineers publishing servers, harnesses and integrations. They are already writing the connective tissue Plum needs to sit inside, and they are reachable because they publish under their own names.", buyer:"Technical founder / Lead engineer" },
    { v:"Teams running local models", stat:"Local", statLbl:"models kept off the API", frag:"Teams running their own models to avoid token spend or to keep data in house, who then cannot get that model anywhere near their meeting infrastructure. You named this one on the call and it is the sharpest version of the gap.", buyer:"CTO / Head of engineering" },
    { v:"Note taker power users", stat:"Ceiling", statLbl:"Fireflies, Otter, Granola, Read", frag:"Teams who already put an agent in every call and have accepted the idea. They have also found the limit of what a transcriber can do. No education needed, only a better answer to a question they are already asking.", buyer:"Ops lead / Chief of staff" },
  ];
  return (
    <section className="section" id="universe">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>02 / Who buys first</span>
          <h2>Narrower than 1 to 20 people.</h2>
          <p>One to 20 person teams is the right frame and it is still too wide for a first test. The teams who convert first are the ones who already run agents and have already been told no by their meeting tool. Four groups, all reachable, all able to decide in a day.</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 &middot; </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}}>Why this list and not a bigger one</div>
            <div style={{fontSize:15,lineHeight:1.55,color:"#fff",fontWeight:500}}>
              Every group here has already accepted an agent in the room. You are not selling the idea, only a better place to run it. That is a short conversation, and a short conversation is what a first motion needs. The wider market, the teams who have never invited an agent to anything, comes after you have proof.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

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

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

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