// Thanx + AICRO — Pilot Recap & Path Forward
// Prepared for Emily & Mary Claire, April 28, 2026
const { useState, useEffect, useRef, useMemo, Fragment } = React;

// ─── 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">Thanx Pilot Recap</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#headline">Headline</a>
            <a href="#leads">Hot leads</a>
            <a href="#campaigns">Campaign performance</a>
            <a href="#forward">Path forward</a>
            <a href="#economics">Economics</a>
            <a href="#close">Next step</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#close" className="btn btn-primary btn-sm">Continue the partnership →</a>
        </div>
      </div>
    </nav>
  );
}

// ─── Hero ─────────────────────────────────────
function Hero() {
  return (
    <section className="hero">
      <div className="hero-grid-bg"></div>
      <div className="wrap hero-content">
        <div className="hero-pill">
          <span className="dot"></span>
          <span>Prepared for Emily &amp; Mary Claire · Thanx · April 28, 2026</span>
        </div>
        <h1 style={{maxWidth:1080, textWrap:"balance"}}>
          13 decision-maker conversations<br/>
          in 17 days.<br/>
          <span style={{color:"#21A8F2"}}>Here&rsquo;s how we scale.</span>
        </h1>
        <p className="lead" style={{marginTop:24}}>
          Bareburger&rsquo;s Co-Founder offered meeting times. Ivar&rsquo;s President spent 20 minutes with us. Landry&rsquo;s SVP of Loyalty surfaced an explicit displacement opening. The Toast Loyalty Angle delivered 8 of 12 email positives at 13.79%, and email PRR doubled to 14% in the last 7 days. Pilot is over. Now we productionize.
        </p>
        <div className="hero-cta-row">
          <a href="#headline" className="btn btn-primary btn-lg">See the headline →</a>
          <a href="#forward" className="btn btn-outline-light btn-lg">Path forward</a>
        </div>
      </div>
    </section>
  );
}

// ─── Trust strip — AICRO clients (proof of motion) ─────────────────────────────────────
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>
  ),
  Lucra: ({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.03em" fill={color}>LUCRA</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>
  ),
  SevenGC: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 80 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="16" fontWeight="600" letterSpacing="0.04em" fill={color}>7G &amp; Co.</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>
  ),
};

function TrustStrip() {
  return (
    <section className="trust-strip">
      <div className="wrap trust-inner">
        <span className="trust-label">AICRO clients</span>
        <div className="trust-logos">
          <ClientLogos.Crexi/>
          <ClientLogos.Pacaso/>
          <ClientLogos.Hemlane/>
          <ClientLogos.Capitalize/>
          <ClientLogos.Lucra/>
          <ClientLogos.Gumption/>
          <ClientLogos.SevenGC/>
        </div>
      </div>
    </section>
  );
}

// ─── Section 1: Headline KPIs ─────────────────────────────────────
function HeadlineKPIs() {
  const tiles = [
    { v: "13", l: "POSITIVE REPLIES", sub: "12 email + 1 LinkedIn", tone: "#3DDC97" },
    { v: "10,520", l: "EMAILS SENT", sub: "80 inboxes · 17 days", tone: "#21A8F2" },
    { v: "7% → 14%", l: "EMAIL PRR", sub: "Doubled in last 7 days", tone: "#3DDC97" },
    { v: "877 → 576", l: "PER POSITIVE", sub: "Good → Great tier", tone: "#3DDC97" },
  ];
  return (
    <section className="section section-soft" id="headline">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Pilot Headline · Apr 12 – Apr 28</span>
          <h2>The pilot beat the internal benchmark by 40%.</h2>
          <p>We set 1,500 emails-to-positive as the floor. Pilot averaged ~877 across the full window and dropped to 576 in the last week — Great-tier efficiency. The depth of the warm pool is the bigger story.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:14,marginTop:8}}>
          {tiles.map((t,i) => (
            <div key={i} className="card" style={{padding:"22px 22px 20px",display:"flex",flexDirection:"column",gap:6,borderTop:`3px solid ${t.tone}`}}>
              <div style={{fontSize:30,fontWeight:600,color:"var(--slate-900)",letterSpacing:"-0.02em",lineHeight:1.05}}>{t.v}</div>
              <div style={{fontFamily:"'JetBrains Mono', monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",fontWeight:600}}>{t.l}</div>
              <div style={{fontSize:13,color:"var(--slate-700)",marginTop:2}}>{t.sub}</div>
            </div>
          ))}
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:14,marginTop:14}}>
          <div className="card" style={{padding:"18px 20px"}}>
            <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:"var(--slate-500)",letterSpacing:"0.08em",fontWeight:600,marginBottom:6}}>LINKEDIN PIPELINE</div>
            <div style={{fontSize:22,fontWeight:600,color:"var(--slate-900)"}}>1,282 → 110</div>
            <div style={{fontSize:13,color:"var(--slate-700)",marginTop:4}}>Connection requests → accepts (8.58%). 110 newly-connected prospects entering messaging phase.</div>
          </div>
          <div className="card" style={{padding:"18px 20px"}}>
            <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:"var(--slate-500)",letterSpacing:"0.08em",fontWeight:600,marginBottom:6}}>TIER A WARM LEADS</div>
            <div style={{fontSize:22,fontWeight:600,color:"var(--slate-900)"}}>13</div>
            <div style={{fontSize:13,color:"var(--slate-700)",marginTop:4}}>President · Co-Founder · CEO · CDO · CFO · SVP · VP. Decision-makers, not gatekeepers.</div>
          </div>
          <div className="card" style={{padding:"18px 20px"}}>
            <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:"var(--slate-500)",letterSpacing:"0.08em",fontWeight:600,marginBottom:6}}>REFERRAL WAVE READY</div>
            <div style={{fontSize:22,fontWeight:600,color:"var(--slate-900)"}}>10 named</div>
            <div style={{fontSize:13,color:"var(--slate-700)",marginTop:4}}>Delegated replies that explicitly named decision-makers (Raising Cane&rsquo;s, CRG, Arc Group). Pre-warmed entry points.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 2: Hot Leads (the headline signal) ─────────────────────────────────────
function HotLeads() {
  const leads = [
    {
      name: "John Simeonidis", co: "Bareburger", title: "CBO & Co-Founder",
      cat: "Meeting times proposed", catTone: "#3DDC97",
      quote: "We can do either Friday at 2pm (EST) or Monday at the same time.",
      note: "Demo locked. Internal read: likely close.",
    },
    {
      name: "Bob Donegan", co: "Ivar's", title: "President",
      cat: "20-min discovery held", catTone: "#3DDC97",
      quote: "Just spent 20 minutes with Kyle and described who we are and what we want.",
      note: "Awaiting follow-up. Top of priority list this week.",
    },
    {
      name: "Lori Kittle", co: "Landry's", title: "SVP of Loyalty",
      cat: "Displacement opening", catTone: "#FF8559",
      quote: "You can share the case study. I own it. We have an in-house custom CSR.",
      note: "Explicit displacement opportunity at one of the largest US restaurant groups.",
    },
    {
      name: "Emily Winston", co: "Boichik Bagels", title: "Founder & CEO",
      cat: "Founder-level due diligence", catTone: "#21A8F2",
      quote: "How immediately are you pulling inventory numbers off Toast?",
      note: "Technical evaluation of the Toast integration; handled offline.",
    },
    {
      name: "Christopher Kung", co: "Zaxby's", title: "Chief Digital Officer",
      cat: "CDO engaged", catTone: "#21A8F2",
      quote: "We&rsquo;re pretty solid on managing discount rate and driving incremental, profit-accretive growth.",
      note: "Engaged on the discount-rate angle — case-study follow-up opportunity.",
    },
    {
      name: "Evan C.", co: "Burning Rice", title: "VP of Operations",
      cat: "Interested", catTone: "#3DDC97",
      quote: "Replied positively to outreach.",
      note: "Follow-up in flight.",
    },
    {
      name: "Neal Tully", co: "Juice Generation", title: "CFO",
      cat: "Interested", catTone: "#3DDC97",
      quote: "That sounds good.",
      note: "CFO replied positively; handled offline.",
    },
  ];
  return (
    <section className="section" id="leads">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>The headline signal</span>
          <h2>Decision-maker depth — not gatekeeper noise.</h2>
          <p>Seven Tier A warm leads quoted verbatim. Every one of them is the actual buyer for a Thanx loyalty platform decision.</p>
        </div>
        <div className="card" style={{padding:0,overflow:"hidden"}}>
          <table className="campaigns-table" style={{width:"100%"}}>
            <thead>
              <tr>
                <th style={{width:"22%"}}>Contact</th>
                <th style={{width:"18%"}}>Company / Title</th>
                <th style={{width:"16%"}}>Category</th>
                <th>Quote / Internal note</th>
              </tr>
            </thead>
            <tbody>
              {leads.map((l,i) => (
                <tr key={i}>
                  <td>
                    <div style={{fontWeight:600,color:"var(--slate-900)",fontSize:14}}>{l.name}</div>
                  </td>
                  <td>
                    <div style={{fontSize:13,color:"var(--slate-900)",fontWeight:500}}>{l.co}</div>
                    <div style={{fontSize:12,color:"var(--slate-500)",marginTop:2}}>{l.title}</div>
                  </td>
                  <td>
                    <span style={{display:"inline-flex",alignItems:"center",gap:6,padding:"4px 10px",background:`${l.catTone}1A`,color:l.catTone,borderRadius:999,fontSize:11.5,fontWeight:600,letterSpacing:"0.01em",whiteSpace:"nowrap"}}>
                      <span style={{width:6,height:6,borderRadius:"50%",background:l.catTone}}></span>{l.cat}
                    </span>
                  </td>
                  <td>
                    <div style={{fontSize:13,color:"var(--slate-900)",fontStyle:"italic",lineHeight:1.55}}>&ldquo;{l.quote}&rdquo;</div>
                    <div style={{fontSize:12,color:"var(--slate-500)",marginTop:6,lineHeight:1.5}}>{l.note}</div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{marginTop:18,padding:"16px 20px",background:"#F0F9FF",borderRadius:10,borderLeft:"3px solid #21A8F2",fontSize:13.5,color:"var(--slate-900)",lineHeight:1.55}}>
          <strong>Beyond the table:</strong> 10 additional replies came back as delegated handoffs that explicitly named the actual decision-makers — Amanda Armstrong at Raising Cane&rsquo;s, Kristie Prantil at CRG, Erin Colombi at Arc Group, and 7 more. Each comes pre-warmed with internal context. Sequencing these as a referral wave is the highest-conviction next move.
        </div>
      </div>
    </section>
  );
}

// ─── Section 3: Campaign Performance ─────────────────────────────────────
function CampaignPerformance() {
  const campaigns = [
    { name: "Toast Loyalty Angle Seq A", channel: "Email", sent: "3,338", positives: 8, pct: "13.79%", per: "417 — Great", tone: "#3DDC97", winner: true },
    { name: "Punchh/Paytronix Displacement Seq A", channel: "Email", sent: "1,948", positives: 2, pct: "5.56%", per: "974 — Good", tone: "#21A8F2" },
    { name: "Punchh/Paytronix Targeting Gap Seq B", channel: "Email", sent: "1,862", positives: 2, pct: "4.26%", per: "931 — Good", tone: "#21A8F2" },
    { name: "Toast Targeting Angle Seq B", channel: "Email", sent: "3,374", positives: 0, pct: "0%", per: "Iterate", tone: "#FF8559" },
    { name: "Punchh/Paytronix Displacement v2", channel: "LinkedIn", sent: "51", positives: 0, pct: "Messaging phase", per: "Pending", tone: "#A8AFC0" },
    { name: "Toast Tech Stack Trigger v2", channel: "LinkedIn", sent: "52", positives: 0, pct: "Messaging phase", per: "Pending", tone: "#A8AFC0" },
  ];
  return (
    <section className="section section-soft" id="campaigns">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>What&rsquo;s working</span>
          <h2>The Toast Loyalty Angle is the program&rsquo;s biggest hook.</h2>
          <p>67% of email positives came from a single sequence at 13.79% per-campaign rate, 417 emails-to-positive. Toast Targeting Seq B (same audience, generic angle) produced 0 over 3,374 emails. The signal is sharp: lead with loyalty-platform value, not generic targeting.</p>
        </div>
        <div className="card" style={{padding:0,overflow:"hidden"}}>
          <table className="campaigns-table" style={{width:"100%"}}>
            <thead>
              <tr>
                <th style={{width:"36%"}}>Campaign</th>
                <th>Channel</th>
                <th style={{textAlign:"right"}}>Sent</th>
                <th style={{textAlign:"right"}}>Positives</th>
                <th style={{textAlign:"right"}}>Pos %</th>
                <th>Per positive</th>
              </tr>
            </thead>
            <tbody>
              {campaigns.map((c,i) => (
                <tr key={i} style={c.winner ? {background:"rgba(61,220,151,0.06)"} : undefined}>
                  <td>
                    <div style={{display:"flex",alignItems:"center",gap:10}}>
                      {c.winner && <span style={{width:6,height:18,background:"#3DDC97",borderRadius:2,flexShrink:0}}></span>}
                      <span style={{fontWeight:c.winner?600:500,color:"var(--slate-900)",fontSize:13.5}}>{c.name}</span>
                    </div>
                  </td>
                  <td style={{fontSize:13,color:"var(--slate-700)"}}>{c.channel}</td>
                  <td style={{textAlign:"right",fontFamily:"'JetBrains Mono', monospace",fontSize:13,color:"var(--slate-900)"}}>{c.sent}</td>
                  <td style={{textAlign:"right",fontFamily:"'JetBrains Mono', monospace",fontSize:13,color:"var(--slate-900)",fontWeight:600}}>{c.positives}</td>
                  <td style={{textAlign:"right",fontFamily:"'JetBrains Mono', monospace",fontSize:13,color:"var(--slate-900)"}}>{c.pct}</td>
                  <td>
                    <span style={{display:"inline-flex",alignItems:"center",gap:6,fontSize:12.5,color:c.tone,fontWeight:600}}>
                      <span style={{width:6,height:6,borderRadius:"50%",background:c.tone}}></span>{c.per}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginTop:18}}>
          <div className="card" style={{padding:"20px 22px",borderTop:"3px solid #3DDC97"}}>
            <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:"#0E9F66",letterSpacing:"0.1em",fontWeight:600}}>WINNER · DOUBLE DOWN</div>
            <h3 style={{fontSize:18,marginTop:6,marginBottom:8,color:"var(--slate-900)",letterSpacing:"-0.01em"}}>Toast Loyalty Angle Seq A</h3>
            <p style={{fontSize:13.5,color:"var(--slate-700)",lineHeight:1.6,margin:0}}>
              8 of 12 email positives. 13.79% per-campaign rate. 9 of the 13 Tier A warm leads (Ivar&rsquo;s, Bareburger, Zaxby&rsquo;s, Boichik, Burning Rice) came through this sequence or its sibling.
            </p>
            <p style={{fontSize:13,color:"var(--slate-900)",lineHeight:1.55,marginTop:10,marginBottom:0,fontWeight:500}}>
              <strong style={{color:"#0E9F66"}}>Action:</strong> Productionize as primary email sequence. Rebuild Seq B around the loyalty hook. Add multi-touch (email → LinkedIn → warm dial) on the named-account list.
            </p>
          </div>
          <div className="card" style={{padding:"20px 22px",borderTop:"3px solid #21A8F2"}}>
            <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:"#1A7FB8",letterSpacing:"0.1em",fontWeight:600}}>SHARPEN · COMPETITIVE INTEL CAPTURED</div>
            <h3 style={{fontSize:18,marginTop:6,marginBottom:8,color:"var(--slate-900)",letterSpacing:"-0.01em"}}>Punchh / Paytronix v3</h3>
            <p style={{fontSize:13.5,color:"var(--slate-700)",lineHeight:1.6,margin:0}}>
              Both sequences landed 4–6% PRR. With March 24 intel — <strong>9–10% Punchh participation vs. Thanx 30–40%</strong>, analytics ceiling, operational agility — there&rsquo;s a clear path to test sharper kill-points.
            </p>
            <p style={{fontSize:13,color:"var(--slate-900)",lineHeight:1.55,marginTop:10,marginBottom:0,fontWeight:500}}>
              <strong style={{color:"#1A7FB8"}}>Action:</strong> v3 sequence leads with the participation gap. B-variant tests the analytics ceiling angle. Target ~5% → 10%+ PRR.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 4: Path Forward — 4 levers ─────────────────────────────────────
function PathForward() {
  const levers = [
    {
      ix: "01 / PRODUCTIONIZE",
      title: "Toast Loyalty Angle as the primary email sequence",
      body: "Double sending volume on the proven hook. Rebuild Seq B around the same loyalty-platform value frame. Layer multi-touch (email → LinkedIn → warm dial) on Tier A named accounts.",
      proof: "8 of 12 positives · 13.79% per-campaign · 417 emails-to-positive",
      tone: "#3DDC97",
    },
    {
      ix: "02 / DEPLOY V3",
      title: "Punchh/Paytronix kill-point messaging",
      body: "Lead with the 9–10% vs 30–40% participation gap. B-variant on the analytics ceiling. Tighten copy with the operational-agility intel captured during pilot.",
      proof: "Target lift: 4–6% PRR → 10%+ PRR · 1,800–2,000 sends per sequence",
      tone: "#21A8F2",
    },
    {
      ix: "03 / OPTIMIZE",
      title: "LinkedIn — rebuild for a more personalized touch",
      body: "110 newly-connected prospects are ready for messaging. The AE feedback was direct: the current copy isn't something they want their name on. Next iteration grounds each message in the prospect&rsquo;s last 30 to 60 days of LinkedIn activity (a recent post, a hire, a panel) so the touch reads peer-to-peer instead of pitch-y. Personalization at the per-prospect level, not segmented templates.",
      proof: "Pause generic copy · activity-grounded rewrite · resume sending with sharper hooks",
      tone: "#0A66C2",
    },
    {
      ix: "04 / REFERRAL WAVE",
      title: "Sequence the 10 delegated decision-maker replies",
      body: "Amanda Armstrong (Raising Cane's), Kristie Prantil (CRG), Erin Colombi (Arc Group), plus 7 more — each named by a colleague who delegated the conversation up. Pre-warmed with internal context.",
      proof: "10 named decision-makers · prior-conversation context · highest conversion conviction",
      tone: "#FFB76B",
    },
  ];
  return (
    <section className="section" id="forward">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>The Path Forward</span>
          <h2>Four levers for the next 30 days.</h2>
          <p>Pilot validated the targeting hypothesis and surfaced enough warm pipeline to drive the next wave of meetings. Each lever below is mechanical — the data is in, the work is execution.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:14}}>
          {levers.map((l,i) => (
            <div key={i} className="card" style={{padding:"22px 24px",borderTop:`3px solid ${l.tone}`}}>
              <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:l.tone,letterSpacing:"0.1em",fontWeight:700}}>{l.ix}</div>
              <h3 style={{fontSize:18,marginTop:6,marginBottom:10,color:"var(--slate-900)",letterSpacing:"-0.01em",lineHeight:1.3}}>{l.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-700)",lineHeight:1.6,margin:0}}>{l.body}</p>
              <div style={{marginTop:14,paddingTop:12,borderTop:"1px solid var(--border)",fontSize:12,color:"var(--slate-500)",fontFamily:"'JetBrains Mono', monospace",letterSpacing:"0.01em"}}>{l.proof}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Section 5: Operational upgrades — addressing call asks ─────────────────────────────────────
function OpsUpgrades() {
  const items = [
    {
      ask: "Named-account safety",
      from: "Emily + Mary Claire",
      quote: "We need to make sure she doesn't accidentally respond to somebody who's at a target account.",
      response: "Stand up an ABM thread for the top 10 to 20 named accounts so replies from those contacts surface separately for Michael Ann to flag up. Routing details we&rsquo;ll calibrate together as the team uses it.",
    },
    {
      ask: "LinkedIn copy",
      from: "Emily, anecdotal AE feedback",
      quote: "The emails were great. The LinkedIn messages — they're not excited about those coming from them.",
      response: "LinkedIn copy v2: strip the pitch from the first touch, lean on \"saw your email — wanted to make sure you got it.\" Activity-grounded follow-ups based on each prospect's last 30/60 days of LinkedIn engagement. AE-friendly tone the reps will actually want their name on.",
    },
    {
      ask: "Reply ownership",
      from: "Mary Claire",
      quote: "I think we should stick Michael Ann in there. Train her on how to do it.",
      response: "Dedicated reply-handler SOP for Michael Ann — Slack triage workflow, response-time SLA tracking, one named-account checklist before sending. We ship the playbook plus a 60-minute training session in week 1 of the scale-up.",
    },
  ];
  return (
    <section className="section section-soft">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Operational upgrades</span>
          <h2>Direct response to today&rsquo;s call.</h2>
          <p>Four asks surfaced on the wrap call. Each one already has a path. None of these gate the renewal — they&rsquo;re shipping in parallel as part of standard ops.</p>
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:12}}>
          {items.map((it,i) => (
            <div key={i} className="card" style={{padding:"20px 24px"}}>
              <div style={{display:"grid",gridTemplateColumns:"180px 1fr",gap:24,alignItems:"start"}}>
                <div>
                  <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:"var(--slate-500)",letterSpacing:"0.1em",fontWeight:600,marginBottom:4}}>YOU ASKED</div>
                  <div style={{fontSize:15,fontWeight:600,color:"var(--slate-900)",letterSpacing:"-0.005em"}}>{it.ask}</div>
                  <div style={{fontSize:12,color:"var(--slate-500)",marginTop:2}}>— {it.from}</div>
                </div>
                <div>
                  <div style={{fontSize:13.5,color:"var(--slate-700)",fontStyle:"italic",lineHeight:1.55,paddingLeft:14,borderLeft:"2px solid var(--border)",marginBottom:10}}>&ldquo;{it.quote}&rdquo;</div>
                  <div style={{fontSize:14,color:"var(--slate-900)",lineHeight:1.6}}><strong style={{color:"#21A8F2",fontWeight:600}}>What we ship: </strong>{it.response}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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

function ReplyAgentInAction() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>The system you already use</span>
          <h2>Reply Agent — where Bareburger landed.</h2>
          <p>Real warm-reply card from the pilot. The agent classifies, drafts, and pipes to Slack so Michael Ann can approve, edit, or reroute.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
          <SlackCard time="2:14 PM" subtitle="POSITIVE (Meeting Booked)" subtitleDot="#3DDC97" showApprove>
            <div className="slack-status-bar">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
              Meeting times proposed
            </div>
            <div className="slack-source-line"><strong>Source:</strong> 📧 Email · <strong>Campaign:</strong> Toast Loyalty Angle Seq A</div>
            <div className="slack-row-a">
              <div className="slack-field">
                <span className="k">Name:</span>
                <span className="v">John Simeonidis</span>
                <span className="k" style={{marginTop:6}}>Title:</span>
                <span className="v">CBO &amp; Co-Founder</span>
              </div>
              <div className="slack-field">
                <span className="k">Company:</span>
                <span className="v">Bareburger</span>
                <span className="k" style={{marginTop:6}}>Stage:</span>
                <span className="v link">Demo scheduling</span>
              </div>
            </div>
            <div className="slack-block">
              <span className="lbl">Last Reply:</span>
              <span className="val">We can do either Friday at 2pm (EST) or Monday at the same time.</span>
            </div>
            <div className="slack-block">
              <span className="lbl">Recommended Next Action:</span>
              <span className="val">Send Calendly with both proposed times. Loop Sam on accept. Mark Handled.</span>
            </div>
            <div className="slack-actions">
              <span className="slack-action success">📅 Calendly</span>
              <span className="slack-action">📋 Salesforce</span>
              <span className="slack-action">📥 Inbox</span>
              <span className="slack-action">✅ Mark Handled</span>
            </div>
          </SlackCard>
          <SlackCard time="11:42 AM" subtitle="POSITIVE (Displacement Opening)" subtitleDot="#FF8559" showApprove>
            <div className="slack-status-bar" style={{background:"#3A1F1F",color:"#FF8559"}}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 8v4M12 16h.01"/><circle cx="12" cy="12" r="9"/></svg>
              ABM AGENT · NAMED ACCOUNT
            </div>
            <div className="slack-source-line"><strong>Source:</strong> 📧 Email · <strong>Campaign:</strong> Punchh/Paytronix Displacement Seq A</div>
            <div className="slack-row-a">
              <div className="slack-field">
                <span className="k">Name:</span>
                <span className="v">Lori Kittle</span>
                <span className="k" style={{marginTop:6}}>Title:</span>
                <span className="v">SVP of Loyalty</span>
              </div>
              <div className="slack-field">
                <span className="k">Company:</span>
                <span className="v">Landry's</span>
                <span className="k" style={{marginTop:6}}>Stage:</span>
                <span className="v link">Case study requested</span>
              </div>
            </div>
            <div className="slack-block">
              <span className="lbl">Last Reply:</span>
              <span className="val">You can share the case study. I own it. We have an in-house custom CSR.</span>
            </div>
            <div className="slack-block">
              <span className="lbl">Why this card is gated:</span>
              <span className="val">Landry's is on the named-account list. Routed to ABM thread for Mary Claire / Sam to handle directly. Reply not auto-drafted.</span>
            </div>
            <div className="slack-actions">
              <span className="slack-action success">📁 Send case study</span>
              <span className="slack-action">📋 Salesforce</span>
              <span className="slack-action">👤 Assign to Sam</span>
            </div>
          </SlackCard>
        </div>
      </div>
    </section>
  );
}

// ─── Section 7: Lock the Playbook — three pillars from pilot learnings ─────────────────────────────────────
function LockPlaybook() {
  const pillars = [
    {
      ix: "01 / LOOKALIKE",
      title: "A lookalike audience built off the pilot&rsquo;s actual responders",
      body: "13 email + 1 LinkedIn positives plus 110 LinkedIn accepts gives us a real responder profile — Toast tech stack, multi-unit operators, loyalty-program owners. The next list is built off that pattern, not generic targeting. We retire what produced 0 over 3,374 emails and double down on what the data validated.",
      proof: "Inputs: 124 known-positive contacts · the Toast Loyalty hook · the referral-wave names",
      tone: "#3DDC97",
    },
    {
      ix: "02 / EVENTS",
      title: "Conferences and events folded into the outbound motion",
      body: "RLC just wrapped — your team came back with named contacts and live conversations. Layer those into the same engine: pre-event teasers to attendee lists, post-event &ldquo;great to meet you&rdquo; sequences, and named-account threads for the operators you spoke with face to face. Each event becomes a multi-touch campaign, not a one-week LinkedIn frenzy.",
      proof: "Connect to: RLC follow-ups · Boichik / Burning Rice / Zaxby&rsquo;s conversations · upcoming industry events",
      tone: "#21A8F2",
    },
    {
      ix: "03 / GTM REALISM",
      title: "A go-to-market plan built realistically off pilot data",
      body: "No vanity volume. No &ldquo;let&rsquo;s 10x sending&rdquo; theater. The pilot tells us where the signal is and where it isn&rsquo;t — productionize the Toast Loyalty Angle, retire the targeting hook that produced zero, sharpen Punchh/Paytronix with the participation-gap intel, and let real numbers drive the next iteration. Every campaign earns its slot with pilot-tier data.",
      proof: "Decision rule: if it doesn&rsquo;t beat pilot benchmarks in 14 days, we kill or rebuild it",
      tone: "#FFB76B",
    },
  ];
  return (
    <section className="section section-soft" id="playbook">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Lock the playbook</span>
          <h2>Use what the pilot taught us. Skip what it didn&rsquo;t.</h2>
          <p>The pilot generated more than reply volume. It generated a profile of who actually responds, what hook lands, and where the team&rsquo;s time is best spent. The next chapter builds off that, not off scaling assumptions.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:14}}>
          {pillars.map((p,i) => (
            <div key={i} className="card" style={{padding:"24px 24px",borderTop:`3px solid ${p.tone}`,display:"flex",flexDirection:"column",gap:12}}>
              <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:p.tone,letterSpacing:"0.1em",fontWeight:700}}>{p.ix}</div>
              <h3 style={{fontSize:18,margin:0,color:"var(--slate-900)",letterSpacing:"-0.01em",lineHeight:1.3}} dangerouslySetInnerHTML={{__html:p.title}}/>
              <p style={{fontSize:13.5,color:"var(--slate-700)",lineHeight:1.6,margin:0}} dangerouslySetInnerHTML={{__html:p.body}}/>
              <div style={{marginTop:"auto",paddingTop:12,borderTop:"1px solid var(--border)",fontSize:11.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono', monospace",letterSpacing:"0.01em",lineHeight:1.5}} dangerouslySetInnerHTML={{__html:p.proof}}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Section 8: Economics ─────────────────────────────────────
function Economics() {
  return (
    <section className="section" id="economics">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>The economics</span>
          <h2>$10,000 / month. $3,000 setup. Three months. The math you can defend.</h2>
          <p>Same outcome we just delivered: decision-maker conversations at named restaurant operators, on a single bill, with one operator in the room. Two cost profiles. One commitment we won&rsquo;t make: meeting volume guarantees. The system, the playbook, and the operator hours — those we own.</p>
        </div>
        <div className="cost-grid">
          <div className="cost-card">
            <div className="cost-eyebrow">Build it yourself</div>
            <h3>Hire an SDR. Stitch the stack.</h3>
            <p style={{color:"var(--slate-500)",fontSize:14,marginTop:6}}>One SDR, a 5-7 logo tool stack, and your time managing both for 9 to 12 months. The thing your sellers are already saying you need.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">1 SDR (loaded)</span><span className="val">$80 to $110K</span></div>
              <div className="cost-list-row"><span className="label">Sales tool stack</span><span className="val">$30 to $50K</span></div>
              <div className="cost-list-row"><span className="label">Manager overhead (you / MC)</span><span className="val">$40K of time</span></div>
              <div className="cost-list-row"><span className="label">Time to first qualified meeting</span><span className="val">9 months</span></div>
              <div className="cost-list-row"><span className="label">Annual SDR turnover</span><span className="val">30 to 40%</span></div>
              <div className="cost-list-row total"><span className="label">Year 1 commitment</span><span className="val">$150 to $200K</span></div>
            </div>
            <div className="cost-meta">Plus the months of ramp before you know if this hire works. Plus the second hire when the first one churns.</div>
          </div>
          <div className="cost-card aicro">
            <div className="cost-eyebrow">AICRO · Thanx · 3-month POC</div>
            <h3>$10,000 / month. Already proven.</h3>
            <p style={{color:"rgba(255,255,255,.65)",fontSize:14,marginTop:6}}>13 decision-maker conversations in 17 days. The engine is built, calibrated, and producing. The next 90 days is execution, not setup.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">Infrastructure setup (one-time)</span><span className="val">$3,000</span></div>
              <div className="cost-list-row"><span className="label">Months 1 to 3 (POC)</span><span className="val">$10,000 / month</span></div>
              <div className="cost-list-row"><span className="label">3-month commitment total</span><span className="val">$33,000</span></div>
              <div className="cost-list-row"><span className="label">Performance review cadence</span><span className="val">Biweekly · operator in the room</span></div>
              <div className="cost-list-row"><span className="label">Already in market</span><span className="val">80 inboxes + 6 LinkedIn senders</span></div>
              <div className="cost-list-row"><span className="label">Pilot cost per positive</span><span className="val">~$2,500</span></div>
              <div className="cost-list-row total"><span className="label">vs. Year 1 self-build</span><span className="val">$33K vs. $150 to $200K</span></div>
            </div>
            <div className="cost-meta">AICRO does not guarantee meeting volume or close rate. We guarantee the system, the operator hours, the biweekly review, and continuous calibration on the data we just generated together.</div>
          </div>
        </div>
        <div style={{marginTop:24,display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:14}}>
          <div className="card" style={{padding:"20px 22px",borderTop:"3px solid #3DDC97"}}>
            <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:"#0E9F66",letterSpacing:"0.1em",fontWeight:600,marginBottom:6}}>BIWEEKLY CADENCE</div>
            <div style={{fontSize:18,fontWeight:600,color:"var(--slate-900)",letterSpacing:"-0.01em",lineHeight:1.3}}>Operator in the room every two weeks</div>
            <p style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.55,marginTop:8,margin:0}}>Doug + Josh review the live numbers, surface what the data is saying, and recalibrate the campaigns with you. Same format that produced the pilot review you&rsquo;re reading.</p>
          </div>
          <div className="card" style={{padding:"20px 22px",borderTop:"3px solid #21A8F2"}}>
            <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:"#1A7FB8",letterSpacing:"0.1em",fontWeight:600,marginBottom:6}}>$3,000 SETUP · ONE TIME</div>
            <div style={{fontSize:18,fontWeight:600,color:"var(--slate-900)",letterSpacing:"-0.01em",lineHeight:1.3}}>Already paid back in pilot</div>
            <p style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.55,marginTop:8,margin:0}}>The infrastructure (80 inboxes, 6 LinkedIn senders, reply agent, Slack triage, ABM thread) is already deployed and warmed. Setup fee covers ongoing maintenance and the new lookalike-audience build.</p>
          </div>
          <div className="card" style={{padding:"20px 22px",borderTop:"3px solid #FFB76B"}}>
            <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:"#C8762E",letterSpacing:"0.1em",fontWeight:600,marginBottom:6}}>3-MONTH POC · $33K TOTAL</div>
            <div style={{fontSize:18,fontWeight:600,color:"var(--slate-900)",letterSpacing:"-0.01em",lineHeight:1.3}}>17% of one SDR&rsquo;s loaded year-one cost</div>
            <p style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.55,marginTop:8,margin:0}}>Same investment window. Already-running engine. No 9-month ramp, no turnover risk, no manager-of-one situation. Continue at $10K/mo or step out at month 3 — your call.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 8: Close ─────────────────────────────────────
function Close() {
  const steps = [
    {
      n: "01",
      title: "Reply yes by Friday",
      body: "One line back — &ldquo;let&rsquo;s keep going&rdquo; — and we&rsquo;ll send the counter-signed 3-month scope within 24 hours.",
    },
    {
      n: "02",
      title: "Software access shared",
      body: "Slack reply channel, biweekly performance dashboard, ABM thread for the top 10 to 20 named accounts, and inbox access for Michael Ann. Provisioned in under 24 hours.",
    },
    {
      n: "03",
      title: "Kickoff call",
      body: "We bring the lookalike-audience plan, the events overlay (RLC follow-ups + upcoming), and the v3 Punchh/Paytronix copy. You bring Michael Ann.",
    },
    {
      n: "04",
      title: "Live and producing",
      body: "Toast Loyalty Seq A continues at scale. v3 launches mid-week. The 110 LinkedIn warm-pool prospects start receiving the new personalized sequence. The referral wave goes out.",
    },
  ];
  return (
    <section className="section" id="close">
      <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:"#3DDC97"}}><span className="dot" style={{background:"#3DDC97"}}></span>Take the week · Decide by Friday</span>
            <h2 style={{color:"#fff",fontSize:42,letterSpacing:"-0.02em",lineHeight:1.12,marginTop:18,textWrap:"balance",maxWidth:880}}>
              Two and a half weeks ago, we hadn&rsquo;t met Bareburger, Ivar&rsquo;s, Landry&rsquo;s, or Boichik.<br/>
              <span style={{color:"#3DDC97"}}>Now they&rsquo;re conversations.</span>
            </h2>
            <p style={{color:"rgba(255,255,255,0.72)",fontSize:16,lineHeight:1.65,marginTop:22,maxWidth:780}}>
              That&rsquo;s a great result for 17 days, and it belongs to all of us. Take the week with Mary Claire to decide. When you&rsquo;re ready to keep going, here&rsquo;s exactly how we share the software and get the next sequences in market.
            </p>

            <div style={{marginTop:40,display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:16}}>
              {steps.map((s,i) => (
                <div key={i} style={{background:"rgba(255,255,255,0.04)",border:"1px solid rgba(255,255,255,0.10)",borderRadius:12,padding:"24px 28px",display:"flex",flexDirection:"column",gap:12}}>
                  <div style={{display:"flex",alignItems:"center",gap:12}}>
                    <span style={{fontFamily:"'JetBrains Mono', monospace",fontSize:12,letterSpacing:"0.14em",color:"#3DDC97",fontWeight:700}}>{s.n}</span>
                    <span style={{flex:1,height:1,background:"rgba(61,220,151,0.25)"}}></span>
                  </div>
                  <div style={{fontSize:18,fontWeight:600,color:"#fff",letterSpacing:"-0.01em",lineHeight:1.3}}>{s.title}</div>
                  <p style={{fontSize:14.5,color:"rgba(255,255,255,0.74)",lineHeight:1.6,margin:0}} dangerouslySetInnerHTML={{__html:s.body}}/>
                </div>
              ))}
            </div>

            <div style={{marginTop:40,display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
              <a href="mailto:doug@aicro.co?subject=Thanx%20%2B%20AICRO%20%E2%80%94%20yes%2C%20let%27s%20continue" style={{background:"#3DDC97",color:"#0E2F22",border:"none",fontWeight:700,padding:"16px 32px",borderRadius:99,fontSize:15.5,textDecoration:"none",letterSpacing:"-0.005em",whiteSpace:"nowrap"}}>
                Reply yes — let&rsquo;s keep going →
              </a>
              <span style={{fontSize:13.5,color:"rgba(255,255,255,0.62)",lineHeight:1.55,flex:1,minWidth:280,maxWidth:520}}>
                Counter-signed scope returns within 24 hours. Software access shared the same day. Kickoff scheduled for the following business day.
              </span>
            </div>

            <div style={{marginTop:44,paddingTop:22,borderTop:"1px solid rgba(255,255,255,0.08)",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:20}}>
              <div style={{display:"flex",gap:36,flexWrap:"wrap"}}>
                <div>
                  <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:"rgba(255,255,255,0.45)",letterSpacing:"0.12em",fontWeight:600,marginBottom:4}}>DOUG SHANKMAN</div>
                  <div style={{color:"#fff",fontSize:14,fontWeight:500}}>Co-Founder, AICRO</div>
                  <a href="mailto:doug@aicro.co" style={{color:"#5AC0FF",fontSize:13,textDecoration:"none"}}>doug@aicro.co</a>
                </div>
                <div>
                  <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",color:"rgba(255,255,255,0.45)",letterSpacing:"0.12em",fontWeight:600,marginBottom:4}}>JOSH KULCHIN</div>
                  <div style={{color:"#fff",fontSize:14,fontWeight:500}}>Co-Founder, AICRO</div>
                  <a href="mailto:josh@aicro.co" style={{color:"#5AC0FF",fontSize:13,textDecoration:"none"}}>josh@aicro.co</a>
                </div>
              </div>
              <div style={{fontSize:11,fontFamily:"'JetBrains Mono', monospace",letterSpacing:"0.08em",color:"rgba(255,255,255,0.40)"}}>
                THANX PILOT RECAP · APRIL 28, 2026
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────
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">THANX PILOT RECAP · 2026-04-28</span>
      </div>
      <div>doug@aicro.co · josh@aicro.co</div>
      <div className="footer-meta">© 2026 AICRO · Built by operators</div>
    </footer>
  );
}

// ─── App ─────────────────────────────────────
function App() {
  return (
    <Fragment>
      <Nav/>
      <Hero/>
      <TrustStrip/>
      <HeadlineKPIs/>
      <HotLeads/>
      <CampaignPerformance/>
      <PathForward/>
      <ReplyAgentInAction/>
      <OpsUpgrades/>
      <LockPlaybook/>
      <Economics/>
      <Close/>
      <Footer/>
    </Fragment>
  );
}

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