// AICRO · Fielo · Proposal (v5, 2026-09-24)
// Built on the Membio component system (membio.aicro.co): template styles.css + styles-v2.css,
// dark hero, bordered cards, A-tier target cards, cost-grid pair, case-study cards, dark CTA.
// Every Fielo figure is what Sanjay stated on the 2026-09-21 call. Every AICRO figure carries
// its as-of date. Sources: sources-note.md.
const { useState, Fragment } = React;

const CALENDLY = "https://calendly.com/doug-aicro/custom-demo-qa";
const MONO = "'JetBrains Mono',monospace";

// Small shared pieces, all in the Membio visual vocabulary.
function Tag({ children, color }) {
  return <div style={{fontFamily:MONO,fontSize:10,letterSpacing:"0.12em",color:color || "#21A8F2",textTransform:"uppercase",fontWeight:600}}>{children}</div>;
}
function MiniLabel({ children, color }) {
  return <div style={{fontFamily:MONO,fontSize:9,letterSpacing:"0.1em",color:color || "#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>{children}</div>;
}
function Bullets({ items, color }) {
  return (
    <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:8}}>
      {items.map((f,j) => (
        <li key={j} style={{display:"flex",gap:8,alignItems:"flex-start"}}>
          <span style={{color:color || "#21A8F2",fontWeight:700,fontSize:13,lineHeight:1.5}}>&middot;</span>
          <span style={{fontSize:13.5,color:"var(--slate-700)",lineHeight:1.5}}>{f}</span>
        </li>
      ))}
    </ul>
  );
}

// ─── 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">Fielo Proposal</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#heard">What we heard</a>
            <a href="#tandem">ABM in tandem</a>
            <a href="#pilot">The pilot</a>
            <a href="#accounts">Accounts</a>
            <a href="#team">Handoff</a>
            <a href="#math">Economics</a>
            <a href="#terms">Terms</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#cta" className="btn btn-primary btn-sm">Book the walkthrough</a>
        </div>
      </div>
    </nav>
  );
}

// ─── Hero ─────────────────────────────────────
function Hero() {
  const stats = [
    { v: "0 to $70M", l: "Crexi revenue · built by the operator running your pilot" },
    { v: "2 weeks", l: "the pilot · one lane · no cost" },
    { v: "Your ABM", l: "named accounts stay yours · we amplify them" },
    { v: "Replies, not connections", l: "qualified conversations in your sellers' inbox" },
  ];
  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 Sanjay Agarwal and Tim Herman · Fielo · September 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          Your ABM goes deep.<br/>
          <span style={{color:"#21A8F2"}}>We work in tandem, amplifying it across the channel market.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:920}}>
          Tim&rsquo;s ABMers run long value dialogues with the accounts that matter most. That motion stays yours. AICRO works the channel market around it: companies whose revenue runs through partners, graded against your ICP, reached by email and LinkedIn, and handed to your sellers only once they have replied and asked to talk. Signals on your named accounts go to their ABM owner, never into a sequence.
        </p>
        <div className="hero-cta-row">
          <a href="#heard" className="btn btn-primary btn-lg">Start with what we heard</a>
          <a href="#pilot" className="btn btn-outline-light btn-lg">See the 2-week pilot</a>
        </div>
        <div className="f-cols-4" style={{marginTop:36,paddingTop:24,borderTop:"1px solid rgba(255,255,255,0.10)",display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:24,maxWidth:960}}>
          {stats.map((s,i) => (
            <div key={i}>
              <div style={{fontSize:22,fontWeight:600,letterSpacing:"-0.01em",color:"#fff"}}>{s.v}</div>
              <div style={{fontSize:11,color:"rgba(255,255,255,0.55)",fontFamily:MONO,letterSpacing:"0.06em",textTransform:"uppercase",marginTop:4,lineHeight:1.4}}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Trust strip (same partners as the Membio page) ───────────────
function TrustStrip() {
  const logo = (txt, style) => <span style={Object.assign({fontSize:17,fontWeight:700,letterSpacing:"-0.02em",color:"#1C1C24"}, style || {})}>{txt}</span>;
  return (
    <section className="trust-strip">
      <div className="wrap trust-inner">
        <span className="trust-label">AICRO operating partners</span>
        <div className="trust-logos">
          {logo("CREXi", {fontSize:18})}
          {logo("Capitalize", {fontWeight:800})}
          {logo("gumption", {fontStyle:"italic"})}
          {logo("Johnson Capital", {fontSize:15,fontWeight:600,letterSpacing:"0.01em"})}
          {logo("Worth Clark", {fontSize:15,fontWeight:600,letterSpacing:"0.02em"})}
        </div>
      </div>
    </section>
  );
}

// ─── 01 · What we heard ─────────────────────────────────────
function WhatWeHeard() {
  const cards = [
    { tag: "01 · Your motion", stat: "3 legs", statLbl: "inbound · ABM · broad outbound",
      title: "Three legs: inbound, ABM, and broad outbound.",
      body: "Inbound through content, SEO, and answer engines. ABM through deep, vertical value dialogues on the accounts you pick. And a third motion, broader than ABM, that reaches the rest of the market. The third one is where we fit." },
    { tag: "02 · Your economics", stat: "70 to 78%", statLbl: "of the business runs through channel",
      title: "Channel is 70 to 78 percent of the business.",
      body: "Channel partner programs start around $30,000 to $35,000 a year and reach seven figures, at companies with a couple hundred million in revenue or more. A $60,000 deal can close in about 60 days. Consumer loyalty deals start around $80,000 to $90,000." },
    { tag: "03 · What burned you before", stat: "Replies", statLbl: "not connections",
      title: "Leads your team had to nurture into meetings.",
      body: "A past agency handed over LinkedIn connections and called them leads. Your sellers inherited the job of turning a connection into a conversation, without the people to do it. We hand over a reply from someone who has asked to talk. Nothing earlier." },
    { tag: "04 · Where outbound works", stat: "Decided", statLbl: "buyers already acting",
      title: "Companies that have already decided.",
      body: "The largest brands buy through their systems integrators, and a company without a program is years from buying one. The best prospects have already decided to run a program or to replace the one they have. Finding that moment is a signal problem, and signals are what we build." },
  ];
  return (
    <section className="section" id="heard">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>01 / What we heard</span>
          <h2>Before anything about us, here is what you told us.</h2>
          <p>From our September 21 conversation. If we have any of this wrong, it is the first thing we fix.</p>
        </div>
        <div className="f-cols-2" style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          {cards.map((d,i) => (
            <div key={i} className="card" style={{padding:28,display:"flex",flexDirection:"column",gap:14}}>
              <Tag>{d.tag}</Tag>
              <div style={{display:"flex",alignItems:"baseline",gap:14,flexWrap:"wrap",paddingBottom:10,borderBottom:"1px solid var(--border)"}}>
                <span style={{fontSize:40,fontWeight:600,letterSpacing:"-0.02em",color:"var(--shark)",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:11,color:"var(--slate-500)",fontFamily:MONO,letterSpacing:"0.06em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <h3 style={{fontSize:20,lineHeight:1.3,color:"var(--shark)",margin:0}}>{d.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>{d.body}</p>
            </div>
          ))}
        </div>
        <div style={{marginTop:32,padding:"28px 30px",background:"var(--shark)",borderRadius:14,color:"#fff"}}>
          <div style={{fontFamily:MONO,fontSize:10,letterSpacing:"0.14em",color:"#3DDC97",textTransform:"uppercase",fontWeight:600,marginBottom:12}}>Your call on the lanes</div>
          <div style={{fontSize:22,lineHeight:1.35,fontWeight:600,maxWidth:940,marginBottom:12}}>You know this market. The pilot starts where it already knows you.</div>
          <div style={{fontSize:16,lineHeight:1.6,color:"rgba(255,255,255,.78)",maxWidth:940}}>
            Fashion and retail at around $90,000 a deal is a lane you named, and it stays yours to call. For a two-week window, we index on where Fielo already has brand affinity: channel programs, where your customers, your case studies, and most of your revenue already sit. Outreach lands warmer when a buyer&rsquo;s peers already run your platform, and every lane you choose next launches from what the pilot learns.
          </div>
          <div className="f-cols-3" style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:24,marginTop:24,paddingTop:20,borderTop:"1px solid rgba(255,255,255,0.12)"}}>
            {[
              { v: "70 to 78%", l: "of Fielo’s revenue comes from channel programs" },
              { v: "~60 days", l: "to close the $60,000 channel deal you are working now" },
              { v: "Day one", l: "Sanjay and Tim confirm the final verticals" },
            ].map((s,i) => (
              <div key={i}>
                <div style={{fontSize:26,fontWeight:600,letterSpacing:"-0.01em",color:"#fff"}}>{s.v}</div>
                <div style={{fontSize:11,color:"rgba(255,255,255,0.55)",fontFamily:MONO,letterSpacing:"0.06em",textTransform:"uppercase",marginTop:4,lineHeight:1.45}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 02 · ABM in tandem ─────────────────────────────────────
// A diagram: Tim's ABM on the left, AICRO on the right, the four touchpoints on a centre spine.
function Tandem() {
  const motions = [
    { tier: "ABM", label: "Tim’s ABM", color: "#21A8F2", tint: "#E9F5FE",
      head: "Depth on the accounts you choose.",
      points: ["A named list by vertical, geography, and size", "13 to 20 week value dialogues about the buyer’s world, not the product", "ABMers known as experts in their vertical", "Conferences and face-to-face conversations"] },
    { tier: "AICRO", label: "AICRO", color: "#0E9F66", tint: "#E5F9F0",
      head: "Reach across the channel market around it.",
      points: ["Every channel program in your verticals, graded against your ICP", "Signals that show a company has decided to act", "Email and LinkedIn outreach, written in your voice, approved by your team", "Replies handed to sellers once a prospect asks to talk"] },
  ];
  const meets = [
    { t: "Your named accounts are excluded from outbound.", d: "Tim's ABM list goes on a suppression list on day one. We never send a cold sequence into an account your ABMers are working." },
    { t: "Signals on named accounts go to their owner.", d: "When a named account hires a channel leader or relaunches a partner program, the ABM owner hears about it first. The signal feeds the value dialogue instead of a sequence." },
    { t: "The market's replies inform the dialogue.", d: "Every reply tells us which themes channel leaders respond to, vertical by vertical. Your ABMers get that read weekly, so their value dialogues start from what the market is already saying." },
    { t: "Warm replies route by account, not by channel.", d: "If someone at an ABM account replies to anything, the conversation lands with that account's owner, with the full history attached." },
  ];
  const Motion = ({ t }) => (
    <div className="card" style={{padding:0,overflow:"hidden",display:"flex",flexDirection:"column",borderTop:`4px solid ${t.color}`,height:"100%"}}>
      <div style={{padding:"20px 22px 16px",background:t.tint}}>
        <div style={{fontFamily:MONO,fontSize:11,fontWeight:800,color:t.color,letterSpacing:"0.08em"}}>{t.tier}</div>
        <div style={{fontSize:19,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",marginTop:4}}>{t.label}</div>
        <div style={{fontSize:14,color:"var(--slate-700)",marginTop:6}}>{t.head}</div>
      </div>
      <div style={{padding:"18px 22px 22px",flex:1}}>
        <Bullets items={t.points} color={t.color}/>
      </div>
    </div>
  );
  return (
    <section className="section section-soft" id="tandem">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">02 / ABM in tandem</span>
          <h2>Two motions, one market, no overlap.</h2>
          <p>ABM goes deep on a short list. AICRO reaches the much larger set of channel companies outside it, and finds the ones that are ready now. Each motion makes the other one better.</p>
        </div>
        <div className="f-tandem" style={{display:"grid",gridTemplateColumns:"1fr 1.35fr 1fr",gap:0,alignItems:"stretch"}}>
          <Motion t={motions[0]}/>
          <div style={{display:"flex",flexDirection:"column",justifyContent:"space-between",gap:12,padding:"8px 0"}}>
            <div style={{textAlign:"center",fontFamily:MONO,fontSize:10,letterSpacing:"0.14em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700}}>Where they meet</div>
            {meets.map((m,i) => (
              <div key={i} style={{display:"flex",alignItems:"center"}}>
                <div className="f-rule" style={{flex:"0 0 22px",height:2,background:"#21A8F2"}}></div>
                <div className="card" style={{flex:1,padding:"14px 16px",display:"flex",gap:12,alignItems:"flex-start",boxShadow:"0 6px 18px -12px rgba(28,28,36,.35)"}}>
                  <span style={{width:26,height:26,borderRadius:"50%",background:"var(--shark)",color:"#fff",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:12,fontWeight:800,flexShrink:0}}>{i + 1}</span>
                  <div>
                    <div style={{fontSize:14,fontWeight:600,color:"var(--shark)",lineHeight:1.3}}>{m.t}</div>
                    <p style={{fontSize:12,color:"var(--slate-500)",lineHeight:1.55,margin:"4px 0 0"}}>{m.d}</p>
                  </div>
                </div>
                <div className="f-rule" style={{flex:"0 0 22px",height:2,background:"#0E9F66"}}></div>
              </div>
            ))}
          </div>
          <Motion t={motions[1]}/>
        </div>
        <div style={{marginTop:18,padding:"16px 22px",background:"#fff",border:"1px solid var(--border)",borderLeft:"4px solid #21A8F2",borderRadius:12,fontSize:13.5,color:"var(--slate-700)",lineHeight:1.6}}>
          Signals only fire in the verticals you choose. A signal from outside them is ignored, so the outbound motion never pulls your ABMers into industries they have not studied.
        </div>
      </div>
    </section>
  );
}

// ─── 03 · The pilot lane ─────────────────────────────────────
function PilotLane() {
  const glance = [
    { v: "2 weeks", l: "the pilot · no cost" },
    { v: "1 lane", l: "channel partner programs" },
    { v: "2 verticals", l: "where your proof is deepest" },
    { v: "Day 14", l: "readout against agreed targets" },
  ];
  const who = [
    "Companies with a couple hundred million in revenue or more, where a real share runs through partners",
    "VP or Head of Channel, Partner Programs, Partner Marketing, and Channel Operations",
  ];
  const signals = [
    "A contractor, dealer, or installer program launched or merged",
    "Tier thresholds, rebates, or rules changed mid-year",
    "A new dealer program announced or handed to an agency to promote",
    "A distributor rebuilding how it rewards its dealers",
    "A new channel or partner-program leader hired",
  ];
  const criteria = [
    "Qualified positive replies from channel leaders at graded accounts",
    "Each reply in your sellers' inbox, drafted and ready to answer",
    "Which vertical, signal, and message produced each one",
    "A readout on day 14 against targets we agree on day one",
  ];
  return (
    <section className="section" id="pilot">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>03 / The pilot · two weeks, one lane</span>
          <h2>Channel partner programs first.</h2>
          <p>Two weeks is short, so the pilot runs one lane and runs it well. Channel programs are where Fielo already wins, where your cycle can be around 60 days, and where the buyer answers a well-aimed email.</p>
        </div>
        <div className="f-cols-4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:0,border:"1px solid var(--border)",borderRadius:14,background:"#fff",overflow:"hidden",marginBottom:18}}>
          {glance.map((g,i) => (
            <div key={i} style={{padding:"22px 24px",borderLeft: i ? "1px solid var(--border)" : "none"}}>
              <div style={{fontSize:32,fontWeight:600,letterSpacing:"-0.02em",color: i === 3 ? "#0E9F66" : "var(--shark)",lineHeight:1}}>{g.v}</div>
              <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:MONO,letterSpacing:"0.06em",textTransform:"uppercase",marginTop:8}}>{g.l}</div>
            </div>
          ))}
        </div>
        <div className="f-cols-2" style={{display:"grid",gridTemplateColumns:"1.4fr 1fr",gap:18}}>
          <div className="card" style={{padding:26,display:"flex",flexDirection:"column",gap:18}}>
            <div>
              <MiniLabel>Who we reach</MiniLabel>
              <div style={{display:"flex",flexDirection:"column",gap:8,marginTop:6}}>
                {who.map((w,i) => <div key={i} style={{fontSize:14,color:"var(--shark)",fontWeight:500,lineHeight:1.45}}>{w}</div>)}
              </div>
            </div>
            <div>
              <MiniLabel color="#0E9F66">The signals we watch</MiniLabel>
              <div style={{display:"flex",flexWrap:"wrap",gap:8,marginTop:6}}>
                {signals.map((s,i) => (
                  <span key={i} style={{display:"inline-flex",alignItems:"center",gap:8,padding:"7px 12px",background:"#fff",border:"1px solid var(--border)",borderRadius:99,fontSize:12.5,color:"var(--slate-700)",fontWeight:500}}>
                    <span style={{width:8,height:8,borderRadius:"50%",background: i < 2 ? "#21A8F2" : i < 4 ? "#0E9F66" : "#9D4EDD"}}></span>{s}
                  </span>
                ))}
              </div>
            </div>
          </div>
          <div className="card" style={{padding:26,background:"var(--shark)",display:"flex",flexDirection:"column",gap:14}}>
            <div style={{fontFamily:MONO,fontSize:10,letterSpacing:"0.12em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600}}>What day 14 shows you</div>
            <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:12}}>
              {criteria.map((c,i) => (
                <li key={i} style={{display:"flex",gap:10,alignItems:"flex-start"}}>
                  <span style={{width:18,height:18,borderRadius:"50%",background:"rgba(61,220,151,.15)",color:"#3DDC97",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:10,fontWeight:700,flexShrink:0,marginTop:2}}>✓</span>
                  <span style={{fontSize:14,color:"#fff",lineHeight:1.5,fontWeight:500}}>{c}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 04 · The pilot accounts ─────────────────────────────────────
// Every signal was read from its source page on 2026-09-24 (sources-note.md).
function Accounts() {
  const HV = "#21A8F2", TR = "#0E9F66";
  const lanes = [
    { key: "hvac", tier: "Pilot vertical 1", name: "HVAC, plumbing, water, and energy equipment", color: HV, tint: "#E9F5FE",
      body: "Manufacturers selling through distributors to contractors and installers. The busiest category of 2026 for program launches and rebuilds.",
      buyer: "VP or Director of contractor programs, wholesale, or channel marketing",
      proof: "your heating equipment, pool equipment, and US water filtration cases" },
    { key: "tire", tier: "Pilot vertical 2", name: "Tires and the auto aftermarket", color: TR, tint: "#E5F9F0",
      body: "Manufacturers and distributors competing for the same independent dealers with tiered rebate programs that change mid-year.",
      buyer: "EVP or VP Sales, dealer program and channel marketing leads",
      proof: "Dunlop Conquistadores, plus your tire maker and tire distributor cases" },
  ];
  const targets = [
    { co: "Rheem (Rheem and Ruud)", mono: "RH", lane: "hvac", vert: "HVAC and water heating", size: "Part of Paloma Rheem Holdings", date: "May 18, 2026", m: 4, d: 18,
      why: "Merged the Rheem and Ruud contractor programs into one Multi-Trade Pro Partner program, worth up to $75,000 a year per contractor and enrolled through distributors.",
      how: "Two brand programs becoming one moves points, cash back, and training onto one platform. Your heating equipment case is the reference." },
    { co: "Rinnai America", mono: "RN", lane: "hvac", vert: "Water heating and HVAC", size: "US arm of Rinnai Corporation", date: "Aug 28, 2026", m: 7, d: 28,
      why: "Launched PRO Tech, a loyalty program for plumbing and HVAC installers built on the Rinnai Central app.",
      how: "A new program with two audiences, the technician and the company, is where tiers, rebates, and training get added next." },
    { co: "Generac", mono: "GN", lane: "hvac", vert: "Energy equipment", size: "NYSE: GNRC", date: "Mar 9, 2026", m: 2, d: 9,
      why: "Hired an agency to promote a new dealer program.",
      how: "A new dealer program has to recruit dealers, certify them, and keep them selling: incentives and learning in one place." },
    { co: "Nexen Tire America", mono: "NX", lane: "tire", vert: "Tires", size: "US arm of Nexen Tire", date: "Jul 6, 2026", m: 6, d: 6,
      why: "Reworked its Next Level dealer program. Dealers now need 60 eligible units a quarter, down from 100, with more ways for new dealers to earn.",
      how: "A mid-year threshold change is rebate calculation work. Dunlop Conquistadores is the reference." },
    { co: "American Tire Distributors", mono: "ATD", lane: "tire", vert: "Tire distribution", size: "Private, new ownership since 2025", date: "Jan 12, 2026", m: 0, d: 12,
      why: "Announced an enhanced, tiered loyalty program for its dealer customers, effective January 1, and replaced Hercules Flex with Commercial Flex.",
      how: "A distributor with new owners rebuilding how it rewards dealers is rethinking the whole relationship. Your tire distributor case speaks to it directly." },
  ];
  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep"];
  const byDate = targets.slice().sort((a,b) => (a.m * 31 + a.d) - (b.m * 31 + b.d));
  return (
    <section className="section section-soft" id="accounts">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">04 / The pilot accounts</span>
          <h2>Not a category. A list.</h2>
          <p>Our starting theory, built from where your proof is deepest and where partner programs moved most this year. Every account below changed its program in 2026, and each one is on the public record. You set the final verticals on day one.</p>
        </div>

        <div className="card f-timeline-card" style={{padding:"22px 28px 18px",marginBottom:18}}>
          <div style={{display:"flex",justifyContent:"space-between",gap:16,flexWrap:"wrap",alignItems:"baseline",marginBottom:18}}>
            <Tag>2026 partner-program signals, as announced</Tag>
            <div style={{display:"flex",gap:16,fontSize:12,color:"var(--slate-700)"}}>
              <span><span style={{display:"inline-block",width:9,height:9,borderRadius:"50%",background:HV,marginRight:6}}></span>HVAC, plumbing, energy</span>
              <span><span style={{display:"inline-block",width:9,height:9,borderRadius:"50%",background:TR,marginRight:6}}></span>Tires and aftermarket</span>
            </div>
          </div>
          <div style={{position:"relative",height:96}}>
            <div style={{display:"grid",gridTemplateColumns:"repeat(9,1fr)",fontFamily:MONO,fontSize:10,letterSpacing:"0.08em",color:"var(--slate-500)",textTransform:"uppercase"}}>
              {months.map(m => <div key={m} style={{borderLeft:"1px dashed var(--border)",paddingLeft:6,height:96}}>{m}</div>)}
            </div>
            <div style={{position:"absolute",left:0,right:0,top:44,height:2,background:"linear-gradient(90deg,#E2E8F0,#21A8F2)"}}></div>
            {byDate.map((a,i) => (
              <div key={a.co} style={{position:"absolute",top:36,left:(((a.m + a.d / 31) / 9) * 100) + "%",transform:"translateX(-50%)",display:"flex",flexDirection:"column",alignItems:"center"}}>
                <span style={{width:18,height:18,borderRadius:"50%",background:"#fff",border:`4px solid ${a.lane === "hvac" ? HV : TR}`,boxShadow:"0 0 0 4px rgba(255,255,255,.9)"}}></span>
                <span style={{marginTop:6 + (i % 2) * 18,fontSize:11.5,fontWeight:600,color:"var(--shark)",whiteSpace:"nowrap"}}>{a.co.split(" (")[0]}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="f-cols-2" style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          {lanes.map(l => {
            const list = targets.filter(t => t.lane === l.key);
            return (
              <div key={l.key} style={{display:"flex",flexDirection:"column",gap:14}}>
                <div className="card" style={{padding:0,overflow:"hidden",borderTop:`4px solid ${l.color}`}}>
                  <div style={{padding:"18px 22px",background:l.tint,display:"flex",justifyContent:"space-between",gap:16,alignItems:"flex-start"}}>
                    <div>
                      <div style={{fontFamily:MONO,fontSize:10.5,fontWeight:800,color:l.color,letterSpacing:"0.08em",textTransform:"uppercase"}}>{l.tier}</div>
                      <div style={{fontSize:17,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",marginTop:6}}>{l.name}</div>
                    </div>
                    <div style={{textAlign:"right",flexShrink:0}}>
                      <div style={{fontSize:34,fontWeight:600,color:l.color,lineHeight:1,letterSpacing:"-0.02em"}}>{list.length}</div>
                      <div style={{fontFamily:MONO,fontSize:9,color:"var(--slate-500)",letterSpacing:"0.08em",textTransform:"uppercase",marginTop:4}}>accounts shown</div>
                    </div>
                  </div>
                  <div style={{padding:"14px 22px 18px",display:"flex",flexDirection:"column",gap:10}}>
                    <p style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.6,margin:0}}>{l.body}</p>
                    <div style={{fontSize:11.5,color:"var(--slate-700)",fontFamily:MONO,letterSpacing:"0.02em",lineHeight:1.6}}>
                      <strong>Buyer:</strong> {l.buyer}<br/>
                      <strong>Your proof:</strong> {l.proof}
                    </div>
                  </div>
                </div>
                {list.map(t => (
                  <div key={t.co} className="card" style={{padding:0,overflow:"hidden",borderLeft:`4px solid ${l.color}`}}>
                    <div style={{display:"flex",alignItems:"center",gap:14,padding:"16px 20px",borderBottom:"1px solid var(--border)"}}>
                      <span style={{width:44,height:44,borderRadius:10,background:l.tint,color:l.color,display:"inline-flex",alignItems:"center",justifyContent:"center",fontWeight:800,fontSize:14,flexShrink:0,letterSpacing:"-0.02em"}}>{t.mono}</span>
                      <div style={{flex:1,minWidth:0}}>
                        <div style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.2}}>{t.co}</div>
                        <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:MONO,marginTop:3}}>{t.vert} · {t.size}</div>
                      </div>
                      <span style={{padding:"5px 10px",borderRadius:8,background:"var(--shark)",color:"#fff",fontFamily:MONO,fontSize:10.5,fontWeight:700,letterSpacing:"0.04em",flexShrink:0}}>{t.date}</span>
                    </div>
                    <div className="f-cols-2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,padding:"14px 20px 16px"}}>
                      <div>
                        <MiniLabel>Why now</MiniLabel>
                        <p style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5,margin:0}}>{t.why}</p>
                      </div>
                      <div>
                        <MiniLabel color="#0E9F66">Why Fielo fits</MiniLabel>
                        <p style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5,margin:0}}>{t.how}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            );
          })}
        </div>
        <div style={{marginTop:18,padding:"20px 24px",background:"var(--shark)",borderRadius:14,color:"#fff",fontSize:14.5,lineHeight:1.6}}>
          <span style={{fontFamily:MONO,fontSize:10,letterSpacing:"0.12em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600,marginRight:12}}>How the full list is built</span>
          Five examples from a graded list. Every account is checked against your customers and Tim&rsquo;s named accounts, graded against your ICP, and watched daily in its own trade press for the next program launch, merge, tier change, or rebate rebuild. Building materials, where you already have customer proof, is the natural third vertical.
        </div>
      </div>
    </section>
  );
}

// ─── 05 · What your sellers get ─────────────────────────────────────
// Real product screens from a current AICRO engagement, client and prospect details pixelated.
function Handoff() {
  const flow = [
    { t: "Every account graded", d: "Each account is graded against your ICP before anyone there hears from us, so outreach goes only to A and B accounts.", owner: "AICRO" },
    { t: "Replies land in one inbox", d: "Email and LinkedIn replies arrive in one master inbox, on an executive's name with the seller copied, and post to Slack the moment they land.", owner: "AICRO" },
    { t: "Your seller answers", d: "Remi drafts the answer in the seller's voice. Cole adds the seller's booking link and real open times. The seller sends it.", owner: "Your seller", you: true },
    { t: "Every meeting tracked", d: "Each booked meeting is followed to its outcome: held, rescheduled, or no-show, with a rebook flagged to the seller when one is needed.", owner: "Cole" },
  ];
  const Shot = ({ src, label, caption, children }) => (
    <div style={{background:"#fff",borderRadius:14,overflow:"hidden",boxShadow:"0 1px 2px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.30)",display:"flex",flexDirection:"column"}}>
      <div style={{padding:"10px 16px",background:"#F1F5F9",borderBottom:"1px solid #E2E8F0",display:"flex",alignItems:"center",gap:10}}>
        <span style={{width:8,height:8,borderRadius:"50%",background:"#21A8F2"}}></span>
        <span style={{fontFamily:MONO,fontSize:10,letterSpacing:"0.12em",color:"#334155",fontWeight:600,textTransform:"uppercase"}}>{label}</span>
      </div>
      <img src={src} alt={label} style={{display:"block",width:"100%",height:"auto"}}/>
      <div style={{padding:"14px 18px",fontSize:13,color:"#475569",lineHeight:1.55}}>{caption}{children}</div>
    </div>
  );
  const rest = [
    { t: "Master inbox", d: "Every email and LinkedIn conversation in one place, answered from one screen." },
    { t: "Lead board", d: "Every qualified lead with its grade, owner, and stage. One view for every seller, whatever state the CRM is in." },
    { t: "Living playbook", d: "Written at onboarding and kept current from your calls and deals. Sellers train on it, and every draft writes from it." },
    { t: "Your CRM", d: "Connection scoped at kickoff. The lead board and Slack carry the pilot, so day one starts on time." },
  ];
  return (
    <section className="section section-dark" id="team">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">05 / What your sellers get</span>
          <h2>What your sellers get, and exactly where we hand off.</h2>
          <p>We deliver the conversation. Your seller owns the close. Every step before the handoff is visible to you, and every step after it is measured.</p>
        </div>

        <div className="f-cols-4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:36}}>
          {flow.map((s,i) => (
            <div key={i} style={{padding:"18px 18px 20px",borderRadius:12,background: s.you ? "rgba(61,220,151,.10)" : "rgba(255,255,255,.04)",border:"1px solid " + (s.you ? "rgba(61,220,151,.35)" : "rgba(255,255,255,.10)")}}>
              <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:10}}>
                <span style={{width:26,height:26,borderRadius:"50%",background: s.you ? "#3DDC97" : "#21A8F2",color:"#1C1C24",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:12,fontWeight:800}}>{i + 1}</span>
                <span style={{fontFamily:MONO,fontSize:9.5,fontWeight:700,letterSpacing:"0.08em",textTransform:"uppercase",color: s.you ? "#3DDC97" : "rgba(255,255,255,.55)"}}>{s.owner}</span>
              </div>
              <div style={{fontSize:15,fontWeight:600,color:"#fff",marginBottom:6}}>{s.t}</div>
              <p style={{fontSize:12.5,color:"rgba(255,255,255,.65)",lineHeight:1.55,margin:0}}>{s.d}</p>
            </div>
          ))}
        </div>

        <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",marginBottom:16,flexWrap:"wrap",gap:12}}>
          <div style={{fontFamily:MONO,fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,0.5)",textTransform:"uppercase",fontWeight:700}}>The screens your team works from</div>
          <span style={{fontSize:12,color:"rgba(255,255,255,0.55)",fontFamily:MONO,letterSpacing:"0.04em"}}>real screens, client and prospect details pixelated</span>
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:18}}>
          <Shot src="uploads/fielo-exec-summary.png" label="Full funnel view" caption="Sends, replies, qualified leads, meetings, and deals for every campaign, with the reason behind every attribution."/>
          <div className="f-cols-2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18,alignItems:"start"}}>
            <Shot src="uploads/fielo-reply-card.png" label="Slack routing · Remi" caption="Each lead posts to Slack as it arrives, so the seller, the manager, and Tim see it at the same moment. "><strong style={{color:"#1C1C24"}}>Remi</strong> drafts the seller&rsquo;s answer to every prospect who replies, in the seller&rsquo;s voice, built to book the meeting.</Shot>
            <Shot src="uploads/fielo-campaign-drawer.png" label="Campaign drill-in · Cole" caption=""><strong style={{color:"#1C1C24"}}>Cole</strong> supplies the seller&rsquo;s booking link and real availability, and follows every booked meeting to its outcome.</Shot>
          </div>
        </div>

        <div className="f-cols-2" style={{display:"grid",gridTemplateColumns:"1fr 1.6fr",gap:18,marginTop:28}}>
          <div style={{padding:"24px 26px",borderRadius:14,background:"rgba(255,255,255,.04)",border:"1px solid rgba(255,255,255,.10)"}}>
            <div style={{fontFamily:MONO,fontSize:10,letterSpacing:"0.12em",color:"#3DDC97",textTransform:"uppercase",fontWeight:600,marginBottom:14}}>What this handoff produces</div>
            <div className="f-cols-2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
              <div>
                <div style={{fontSize:44,fontWeight:600,letterSpacing:"-0.02em",color:"#fff",lineHeight:1}}>346</div>
                <p style={{fontSize:12,color:"rgba(255,255,255,.6)",lineHeight:1.55,margin:"8px 0 0"}}>meetings from 1,331 positive replies at Capitalize, all-time as of March 2026</p>
              </div>
              <div>
                <div style={{fontSize:44,fontWeight:600,letterSpacing:"-0.02em",color:"#3DDC97",lineHeight:1}}>27%</div>
                <p style={{fontSize:12,color:"rgba(255,255,255,.6)",lineHeight:1.55,margin:"8px 0 0"}}>of every meeting at a loyalty-adjacent client came from AICRO, as of February 2026</p>
              </div>
            </div>
          </div>
          <div className="f-cols-2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
            {rest.map((s,i) => (
              <div key={i} style={{padding:"16px 18px",borderRadius:12,background:"rgba(255,255,255,.04)",border:"1px solid rgba(255,255,255,.10)"}}>
                <div style={{fontSize:14,fontWeight:600,color:"#fff",marginBottom:4}}>{s.t}</div>
                <p style={{fontSize:12,color:"rgba(255,255,255,.6)",lineHeight:1.55,margin:0}}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 06 · The economics ─────────────────────────────────────
function money(n) {
  return "$" + Math.round(n).toLocaleString("en-US");
}
function Economics() {
  const presets = [
    { v: 35000, l: "$35K", note: "Your channel floor" },
    { v: 60000, l: "$60K", note: "The ~60-day deal you are working now" },
    { v: 90000, l: "$90K", note: "The retail deal size you named" },
  ];
  const [acv, setAcv] = useState(60000);
  const [deals, setDeals] = useState(1);
  const program = 30000;
  const cac = program / deals;
  const firstYear = deals * acv;
  const payback = cac / (acv / 12);
  const multiple = firstYear / program;
  const impact = [
    { t: "A sharper ABM motion", d: "Signals on your named accounts go straight to their ABM owner, and every reply shows which themes channel leaders respond to, vertical by vertical.", who: "For Tim and the ABMers" },
    { t: "Content your buyers asked for", d: "Every question and objection in the replies is a topic in your buyers' own words, ready for the content and answer-engine leg of your strategy.", who: "For inbound" },
    { t: "Positioning, tested live", d: "Channel leaders react to your messaging at volume before the agentic product ships. That is a positioning test running every week.", who: "For the agentic launch" },
    { t: "Sellers selling", d: "Your sellers spend their hours in conversations with people who asked to talk, with the draft already written.", who: "For your sales team" },
    { t: "Conferences with a calendar", d: "The same accounts and signals book meetings ahead of the channel events your team attends.", who: "For events" },
  ];
  const chip = (on) => ({border:"1px solid " + (on ? "#21A8F2" : "var(--border)"),background: on ? "#E9F5FE" : "#fff",color:"var(--shark)",borderRadius:10,padding:"10px 14px",textAlign:"left",cursor:"pointer",fontFamily:"inherit"});
  return (
    <section className="section section-soft" id="math">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">06 / The economics</span>
          <h2>What a channel customer costs to acquire.</h2>
          <p>Built on the numbers you gave us: channel deals from $30,000 to $35,000 a year up to seven figures, and a $60,000 deal closing in about 60 days. The first three months of the program cost $30,000.</p>
        </div>
        <div className="cost-grid">
          <div className="cost-card">
            <div className="cost-eyebrow">Deal size (annual)</div>
            <div style={{display:"flex",gap:10,flexWrap:"wrap",marginTop:10}}>
              {presets.map(p => (
                <button key={p.v} onClick={() => setAcv(p.v)} style={chip(acv === p.v)}>
                  <div style={{fontWeight:700,fontSize:17}}>{p.l}</div>
                  <div style={{fontSize:11,color:"var(--slate-500)",marginTop:2}}>{p.note}</div>
                </button>
              ))}
            </div>
            <div className="cost-eyebrow" style={{marginTop:22}}>Deals closed from the first three months</div>
            <div style={{display:"flex",gap:10,marginTop:10}}>
              {[1,2,3].map(n => (
                <button key={n} onClick={() => setDeals(n)} style={Object.assign(chip(deals === n), {minWidth:56,textAlign:"center",fontWeight:700,fontSize:16})}>{n}</button>
              ))}
            </div>
            <div className="cost-meta">Payback is measured on contract revenue. Apply your gross margin and the months stretch in proportion.</div>
          </div>
          <div className="cost-card aicro">
            <div className="cost-eyebrow">At {money(acv)} and {deals} closed {deals === 1 ? "deal" : "deals"}</div>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">Customer acquisition cost</span><span className="val">{money(cac)}</span></div>
              <div className="cost-list-row"><span className="label">First-year contract value</span><span className="val">{money(firstYear)}</span></div>
              <div className="cost-list-row"><span className="label">To pay back acquisition cost</span><span className="val">{payback.toFixed(1)} mo</span></div>
              <div className="cost-list-row total"><span className="label">First-year return on the program</span><span className="val" style={{color:"#3DDC97"}}>{multiple.toFixed(1)}x</span></div>
            </div>
            <div className="cost-meta">At your channel floor, one closed deal pays for the first three months.</div>
          </div>
        </div>
        <div style={{marginTop:28}}>
          <div style={{fontFamily:MONO,fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:14}}>What else the program pays for</div>
          <div className="f-cols-5" style={{display:"grid",gridTemplateColumns:"repeat(5,1fr)",gap:14}}>
            {impact.map((m,i) => (
              <div key={i} className="card" style={{padding:20,display:"flex",flexDirection:"column",gap:10}}>
                <div style={{fontFamily:MONO,fontSize:9.5,letterSpacing:"0.1em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700}}>0{i + 1} · {m.who}</div>
                <div style={{fontSize:15,fontWeight:600,color:"var(--shark)",lineHeight:1.3}}>{m.t}</div>
                <p style={{fontSize:12.5,color:"var(--slate-500)",lineHeight:1.6,margin:0}}>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 07 · Pilot to program ─────────────────────────────────────
// Membio's go-to-market roadmap pattern (the "Four workstreams" gantt).
function PilotToProgram() {
  const workstreams = [
    { name: "Kickoff", desc: "Lock the verticals with Tim, load the ABM suppression list, agree the day-14 targets, and connect the 2 to 3 LinkedIn senders.",
      bars: [ { left: 0, width: 8, label: "DAY 0", cls: "amber" }, { left: 8, width: 92, label: "TARGETS AND SUPPRESSION LIST CARRY FORWARD", cls: "shark" } ],
      delivs: [ { left: 2, label: "Day 0 · verticals locked" } ] },
    { name: "The pilot", desc: "The channel lane goes live on email and LinkedIn. Replies land in your sellers' inbox and in Slack as they arrive.",
      bars: [ { left: 0, width: 25, label: "CHANNEL LANE LIVE · EMAIL + LINKEDIN", cls: "sky" } ],
      delivs: [ { left: 23, label: "Day 14 · the readout" } ] },
    { name: "The program", desc: "The channel lane scales. Retail is tested as a second lane in month two, and the weekly market read goes to Tim's ABMers.",
      bars: [ { left: 25, width: 75, label: "CHANNEL LANE SCALES", cls: "sky" } ],
      delivs: [ { left: 50, label: "Month 2 · retail test lane" }, { left: 30, label: "Weekly read to Tim's ABMers" } ] },
    { name: "Compounding", desc: "Every meeting and closed deal sharpens the targeting. The lanes that produce get more volume; the ones that do not get cut.",
      bars: [ { left: 25, width: 50, label: "EVERY MEETING SHARPENS THE TARGETING", cls: "shark" }, { left: 75, width: 25, label: "MORE VOLUME TO WHAT PRODUCES", cls: "sky" } ],
      delivs: [ { left: 76, label: "Month 4 · compounding" } ] },
  ];
  const included = [
    "Weekly or biweekly working session with Doug",
    "All campaign copy, with your team's final approval",
    "Email infrastructure of about 100 inboxes on domains separate from fielo.com",
    "LinkedIn outreach from 2 to 3 of your people, from their own accounts. We never hold their credentials",
    "The inbox, lead board, Slack routing, and the two agents above",
    "No cap on campaigns. Treat us as a marketing channel, not a fixed deliverable",
  ];
  return (
    <section className="section" id="terms">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">07 / From pilot to program</span>
          <h2>The pilot is week one of the program, not a separate test.</h2>
          <p>The campaigns, inboxes, and targets from the pilot carry straight into the program. Continuing is a decision on a call, not a restart.</p>
        </div>
        <div style={{overflowX:"auto"}}>
          <div className="gantt" style={{minWidth:860}}>
            <div className="gantt-head">
              <div className="col workstream">Workstream</div>
              <div className="col">Day 0<span className="day">Kickoff</span></div>
              <div className="col">Day 14<span className="day">The readout</span></div>
              <div className="col">Months 1 to 3<span className="day">The program</span></div>
              <div className="col">Month 4 onward<span className="day">Compounding</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>
        <div style={{margin:"16px 0 24px",padding:"16px 22px",background:"#fff",border:"1px solid var(--border)",borderLeft:"4px solid #21A8F2",borderRadius:12,fontSize:13.5,color:"var(--slate-700)",lineHeight:1.6}}>
          <strong style={{color:"var(--shark)"}}>Day 14, the readout.</strong> Results against the targets we set on day zero. You decide whether to continue, with the campaigns already running.
        </div>
        <div className="cost-grid">
          <div className="cost-card">
            <div className="cost-eyebrow">The terms</div>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">2-week pilot</span><span className="val">No cost</span></div>
              <div className="cost-list-row"><span className="label">The program</span><span className="val">$10,000 / month</span></div>
              <div className="cost-list-row"><span className="label">Commitment</span><span className="val">3 months or longer</span></div>
              <div className="cost-list-row"><span className="label">Lead floor</span><span className="val">Set after 30 days of data</span></div>
            </div>
            <div className="cost-meta">A floor set before there is any data is a guess. After 30 days we both know the reply rate, the meeting rate, and the quality, and we set the floor on that.</div>
          </div>
          <div className="cost-card aicro">
            <div className="cost-eyebrow">What $10,000 a month includes</div>
            <ul style={{listStyle:"none",padding:0,margin:"14px 0 0",display:"flex",flexDirection:"column",gap:12}}>
              {included.map((x,i) => (
                <li key={i} style={{display:"flex",gap:10,alignItems:"flex-start"}}>
                  <span style={{width:18,height:18,borderRadius:"50%",background:"rgba(61,220,151,.15)",color:"#3DDC97",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:10,fontWeight:700,flexShrink:0,marginTop:2}}>✓</span>
                  <span style={{fontSize:14,color:"rgba(255,255,255,.85)",lineHeight:1.5}}>{x}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 08 · Proof ─────────────────────────────────────
function Proof() {
  const cases = [
    { co: "Capitalize", sector: "CRE data and AI", stage: "As of March 2026",
      body: "Our longest-running engagement. Signal-led outbound on email and LinkedIn into commercial real estate capital markets.",
      asof: "All-time figures as of March 2026",
      metrics: [ { v: "1,331", l: "positive replies", live: true }, { v: "346", l: "meetings booked" }, { v: "~$1.1M", l: "pipeline attributed" }, { v: "$121,218", l: "closed-won revenue" } ] },
    { co: "Sports engagement platform", sector: "Loyalty-adjacent · gyms and golf", stage: "Feb to Mar 2026",
      body: "Gamified engagement sold to venues and operators, the client closest to Fielo's world. Named on request.",
      asof: "Figures as of February to March 2026",
      metrics: [ { v: "173+", l: "positive replies", live: true }, { v: "27%", l: "of all their meetings came from AICRO" }, { v: "$655,300", l: "known pipeline, ARR (6 of 24 deals valued)" } ] },
  ];
  return (
    <section className="section section-soft" id="proof">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">08 / Proof</span>
          <h2>Built by an operator. Measured the same way we will measure yours.</h2>
          <p>Doug took Crexi from 0 to $70M as its revenue leader before starting AICRO. The same discipline runs every engagement: every figure below comes from the client&rsquo;s own funnel, with its date.</p>
        </div>
        <div className="cs-grid f-cols-2" style={{display:"grid",gridTemplateColumns:"repeat(2, 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 style={{fontSize:14,color:"var(--slate-700)",lineHeight:1.6,margin:0}}>{c.body}</p>
                <div className="cs-attr">{c.asof}</div>
              </div>
              <div className="cs-metrics" style={{gridTemplateColumns:`repeat(${c.metrics.length},1fr)`}}>
                {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>
  );
}

// ─── 09 · Position ─────────────────────────────────────
function Matrix() {
  const cols = ["Lead-gen agency", "In-house SDR team", "DIY tool stack", "AICRO"];
  const rows = [
    { row: "Hands sellers replies, not connections", vals: [1, 2, 1], aicro: "Graded, replied, in your inbox" },
    { row: "Works alongside ABM", vals: [1, 2, 1], aicro: "Named accounts excluded and routed to owners" },
    { row: "Operator in the room", vals: [1, 1, 1], aicro: "Doug, weekly" },
    { row: "Reply drafted in your voice", vals: [1, 2, 1], aicro: "Remi drafts, your team approves" },
    { row: "Visibility from send to meeting", vals: [1, 2, 2], aicro: "Lead board and Slack" },
    { row: "Cost predictability", vals: [3, 1, 2], aicro: "One monthly fee, no headcount" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">09 / Position</span>
          <h2>Not an agency. Not a tool. An extension of your revenue team.</h2>
          <p>An operator, a delivery team, and the software above in one engagement, paid as one monthly fee.</p>
        </div>
        <div className="matrix" style={{overflowX:"auto"}}>
          <table>
            <thead>
              <tr>
                <th style={{width:"26%"}}> </th>
                {cols.map((c,i) => <th key={i} className={c === "AICRO" ? "aicro" : ""}>{c}</th>)}
              </tr>
            </thead>
            <tbody>
              {rows.map((r,i) => (
                <tr key={i}>
                  <td className="row-label">{r.row}</td>
                  {r.vals.map((v,j) => (
                    <td key={j}>
                      <span className="dot-row">
                        {[1,2,3,4].map(d => <span key={d} className={"d " + (d <= v ? "on" : "")}></span>)}
                      </span>
                    </td>
                  ))}
                  <td className="aicro">
                    <span style={{display:"inline-flex",alignItems:"center",gap:8,fontWeight:500,color:"var(--slate-900)"}}>
                      <span style={{width:14,height:14,borderRadius:"50%",background:"var(--mint-tint)",color:"var(--mint-deep)",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:10,fontWeight:700}}>✓</span>
                      {r.aicro}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ─── CTA ─────────────────────────────────────
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)"}}>10 / Next step</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>Qualified channel conversations in your inbox before you commit to a program.</h2>
            <p>Sanjay, Tim: thirty minutes to agree the verticals, the ABM suppression list, and the day-14 targets. Then the pilot starts.</p>
            <div style={{marginTop:32,display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
              <a href={CALENDLY} target="_blank" rel="noopener" className="btn btn-lg"
                 style={{background:"#FF8559",color:"#fff",border:"none",fontWeight:600,padding:"14px 28px",borderRadius:99,fontSize:15,textDecoration:"none",letterSpacing:"-0.005em"}}>
                Book the kickoff call →
              </a>
            </div>
            <div style={{marginTop:18,fontSize:12,color:"rgba(255,255,255,0.45)",fontFamily:MONO,letterSpacing:"0.04em"}}>
              calendly.com/doug-aicro/custom-demo-qa
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer wrap">
      <div className="footer-left">
        <span style={{fontFamily:"Montserrat, Inter, sans-serif",fontWeight:800,fontSize:18,color:"#21A8F2",letterSpacing:"-0.01em"}}>AICRO</span>
        <span className="footer-meta">FIELO · PROPOSAL · 2026-09</span>
      </div>
      <div>doug@aicro.co</div>
      <div className="footer-meta">© 2026 AICRO · Doug Shankman & Josh Kulchin, Co-Founders</div>
    </footer>
  );
}

function App() {
  return (
    <Fragment>
      <Nav/>
      <Hero/>
      <TrustStrip/>
      <WhatWeHeard/>
      <Tandem/>
      <PilotLane/>
      <Accounts/>
      <Handoff/>
      <Economics/>
      <PilotToProgram/>
      <Proof/>
      <Matrix/>
      <CTA/>
      <Footer/>
    </Fragment>
  );
}

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