// AICRO · Cashew · GTM plan + 14-day trial
// Built 2026-10-02 from the Oct 1 call with Rich Adam (Head of Sales). Sources: prospects/cashew/sources-note.md
const { useState, useEffect, useRef, useMemo, Fragment } = React;

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

const CALENDLY = "https://calendly.com/doug-aicro/custom-demo-qa";

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

// ─── Nav ─────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="nav-left">
          <a href="#" className="nav-logo">
            <span className="nav-logo-text">AICRO</span>
            <span className="nav-tag">Cashew GTM plan</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">Why now</a>
            <a href="#questions">What we heard</a>
            <a href="#plan">GTM plan</a>
            <a href="#trial">Trial</a>
            <a href="#cases">Proof</a>
            <a href="#economics">The math</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#trial" className="btn btn-ghost btn-sm">See the trial</a>
          <a href={CALENDLY} target="_blank" rel="noopener" className="btn btn-primary btn-sm">Book trial kickoff</a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ dark }) {
  return (
    <section className={`hero ${dark ? "" : "light"}`}>
      <div className="hero-grid-bg"></div>
      <div className="wrap hero-content">
        <div className="hero-pill">
          <span className="dot"></span>
          <span>Prepared for Rich Adam, Addy Graves and Rose Wong · Cashew · October 2, 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          Rich, Cashew got here on networks, conferences and referrals.<br/>
          <span style={{color:"#21A8F2"}}>Here is the plan for the pipeline that does not depend on who you already know.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:920}}>
          On Thursday I promised you a go-to-market plan whether or not you work with us. This is it. The segments we would open with, the signals that tell us who to reach and when, how the engine runs next to your SDRs and AE, and a 14-day trial that puts it to work on real Cashew buyers before you and the co-founders commit to anything.
        </p>
        <div className="hero-cta-row">
          <a href="#plan" className="btn btn-primary btn-lg">Read the plan →</a>
          <a href="#trial" className={dark ? "btn btn-outline-light btn-lg" : "btn btn-ghost btn-lg"}>How the trial works</a>
        </div>
        <div className="hero-stats">
          {[
            {v:"MQL to meeting", l:"every funnel stage measured, every week"},
            {v:"Day 5", l:"target go-live for LinkedIn and email"},
            {v:"Every reply", l:"approved by a Cashew person before it sends"},
            {v:"14 days", l:"live trial · full funnel review on Day 14"},
          ].map((s,i) => (
            <div key={i}>
              <div style={{fontSize:22,fontWeight:600,letterSpacing:"-0.01em",color:dark ? "#fff" : "var(--shark)"}}>{s.v}</div>
              <div style={{fontSize:11,color:dark ? "rgba(255,255,255,0.55)" : "var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase",marginTop:4,lineHeight:1.4}}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Client logos ─────────────────────────────────────
const ClientLogos = {
  Lucra: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 80 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="18" fontWeight="800" letterSpacing="-0.02em" fill={color}>Lucra</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>
  ),
  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>
  ),
  HenryAI: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 100 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="17" fontWeight="700" letterSpacing="-0.01em" fill={color}>Henry AI</text></svg>
  ),
  RemoteLock: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 120 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="16" fontWeight="600" letterSpacing="-0.01em" fill={color}>RemoteLock</text></svg>
  ),
  WorthClark: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 130 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="15" fontWeight="600" letterSpacing="0.02em" fill={color}>Worth Clark</text></svg>
  ),
};

function TrustStrip() {
  const color = "#1C1C24";
  return (
    <section className="trust-strip">
      <div className="wrap trust-inner">
        <span className="trust-label">Operating partners</span>
        <div className="trust-logos">
          <ClientLogos.Lucra color={color}/>
          <ClientLogos.Capitalize color={color}/>
          <ClientLogos.Gumption color={color}/>
          <ClientLogos.HenryAI color={color}/>
          <ClientLogos.RemoteLock color={color}/>
          <ClientLogos.WorthClark color={color}/>
        </div>
      </div>
    </section>
  );
}

// ─── Section 1: Why now ────────────────────────
function MarketThesis() {
  const drivers = [
    {
      tag: "01 · SPEND IS MOVING TO SOFTWARE",
      stat: "11.5%",
      statLbl: "research software growth in 2024 · vs 4.8% for services",
      title: "The budget you sell into is moving your way.",
      body: "The insights industry passed US$150 billion in 2024, and the software side grew more than twice as fast as traditional market research. Buyers are shifting spend from agencies to platforms. Cashew sits on the side of that line that is growing. The question is how many of those buyers hear about Cashew while they are making the switch.",
      source: "Source: ESOMAR Global Market Research 2025, via Research World, Nov 4, 2025",
    },
    {
      tag: "02 · YOUR OWN DATA IS THE HOOK",
      stat: "87%",
      statLbl: "of consumers assume brands use AI-generated content",
      title: "Cashew’s thesis is already in the market. Outbound puts it in front of the people it is for.",
      body: "Your August study of 2,149 Canadian and US consumers is the best opener we could write. Every marketer reading it is worried their content sounds like everyone else’s, and your homepage says it in one line: AI made content easy, it also made it all sound the same. That is an outbound message that earns a reply, because it is about the reader’s problem, not about Cashew.",
      source: "Source: Cashew Research, newswire release, Aug 5, 2026 (n=2,149)",
    },
    {
      tag: "03 · THE SYNTHETIC SHORTCUT",
      stat: "Mar 2026",
      statLbl: "Qualtrics launches synthetic consumer panels",
      title: "The largest player is selling simulated respondents. Cashew sells real ones.",
      body: "Qualtrics now sells synthetic panels that simulate how consumers would answer. That pushes the whole category toward speed without people. Cashew’s answer, 100% real respondents, results in 24 to 72 hours, priced for small and mid-sized teams, is a sharp contrast. Contrast only works if buyers hear it before they sign the other contract.",
      source: "Source: SiliconANGLE, Mar 18, 2026 · cashewresearch.com",
    },
    {
      tag: "04 · MOMENTUM NEEDS A MOTION",
      stat: "US + B2B",
      statLbl: "Cashew’s two stated 2026 priorities",
      title: "Disrupt winner, revenue tripled. Next is a pipeline that scales past the founders’ network.",
      body: "Enterprise category winner at TechCrunch Disrupt 2025, revenue reported tripled year over year, a seed round this year, and a stated focus on the US and the B2B business. Networks and referrals got Cashew here. Two new markets at once need a repeatable way to reach buyers who have never heard of you, every week, without adding a manager.",
      source: "Source: TechCrunch, Dec 9, 2025 · newswire, Nov 4, 2025 · CanadianSME, Dec 2025",
    },
  ];
  return (
    <section className="section" id="thesis">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>01 / Why now</span>
          <h2>The product is landing. The ceiling now is reach.</h2>
          <p>Cashew is winning the rooms it gets into. Four forces make a repeatable outbound motion the go-to-market move that pays back most over the next two quarters.</p>
        </div>
        <div className="qa-grid">
          {drivers.map((d,i) => (
            <div key={i} className="card" style={{padding:28,display:"flex",flexDirection:"column",gap:14}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:600}}>{d.tag}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:14,paddingBottom:10,borderBottom:"1px solid var(--mist)",flexWrap:"wrap"}}>
                <span style={{fontSize:42,fontWeight:600,letterSpacing:"-0.02em",color:"var(--shark)",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <h3 style={{fontSize:20,lineHeight:1.3,color:"var(--shark)",margin:0}}>{d.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>{d.body}</p>
              <div style={{marginTop:"auto",fontSize:11,color:"var(--slate-400)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.02em"}}>{d.source}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Section 3: The GTM plan · what works + two bets ────────────────────────
const WORKING = [
  {
    label:"CPG and food & beverage brands", color:"#21A8F2", tint:"#E9F5FE",
    body:"Your first vertical and your deepest bench of stories: Greenhouse, Side Piece Snacks, Fresh Prep. We point outbound at lookalikes of the brands that already bought, so the first list starts where you already win.",
    buyer:"VP / Director of Marketing · Brand Manager · Head of Innovation",
    signal:"New product line or retail listing, a funding round, a new marketing leader",
  },
  {
    label:"Referrals and the founders’ network", color:"#21A8F2", tint:"#E9F5FE",
    body:"Most of Cashew’s business came through people who already know you. We turn that into a list: lookalikes of closed-won accounts, past champions who changed companies, and quiet opportunities in HubSpot worth reopening.",
    buyer:"Past champions · lookalikes of closed-won · stalled opportunities",
    signal:"A champion changes jobs, an old opportunity goes quiet for 60+ days",
  },
  {
    label:"Your own research as the opener", color:"#21A8F2", tint:"#E9F5FE",
    body:"Your August study found 87% of consumers assume brands use AI-generated content. That is a better first line than anything we could write about Cashew, because it is about the reader’s problem. We lead with the finding, not the platform.",
    buyer:"Every segment",
    signal:"Used as the lead asset in every sequence",
  },
];

const BETS = [
  {
    n:"Bet 1", label:"B2B marketers who publish research-led content", color:"#9D4EDD", tint:"#F4ECFE",
    why:"Building the B2B business is one of Cashew’s two stated priorities for 2026, and your homepage now speaks straight to this buyer. Helcim and Pearson are already customers. SaaS and fintech marketers need original data for reports, PR and campaigns, and most stitch it together from surveys they run themselves.",
    buyer:"Head of Content · Director of Demand Gen · PR and Comms lead",
    signals:["Hiring a content or PR lead","Publishes an annual “state of” report","A competitor just released a data-led report"],
    open:"“Your next report, built on fresh data nobody else has, in days instead of a quarter.”",
    test:"One LinkedIn track from Day 5 of the trial, so Day 14 shows whether this buyer replies.",
  },
  {
    n:"Bet 2", label:"Conference-led outbound", color:"#FF8559", tint:"#FFEEE5",
    why:"Conferences already work for Cashew. Across AICRO’s campaign history, conference campaigns are our most efficient type, about 6.5 times more positive replies per email than evergreen outreach, because the event gives the buyer a reason to answer. You get that lift whether or not you exhibit.",
    buyer:"Attendees and speakers at the events your buyers go to",
    signals:["Quirk’s Los Angeles · Feb 24-25, 2027","Quirk’s Chicago · Mar 24-25, 2027","IIEX North America · Washington, D.C., late April 2027"],
    open:"“You’ll be at Quirk’s in LA. Worth 15 minutes there, or a call before you fly?”",
    test:"During the trial we build the Quirk’s LA target list, so pre-show outreach can start in January. Event replies are reported apart from cold outreach, so a high reply rate never hides a weaker fit.",
  },
];

function GTMPlan() {
  return (
    <section className="section" id="plan">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>03 / The go-to-market plan</span>
          <h2>Start with what already works. Add two bets worth testing.</h2>
          <p>A trial is fourteen days, so it should test the engine on ground Cashew has already won, then test the two expansions we think are most likely to pay off. This is built from your site, your customer stories and what you told us on the call. On Day 1 we check it against your HubSpot.</p>
        </div>

        <div className="plan-kicker" style={{color:"#21A8F2"}}>What is working today · the trial starts here</div>
        <div className="work-grid">
          {WORKING.map((w,i) => (
            <div key={i} className="card" style={{padding:"22px 24px",display:"flex",flexDirection:"column",gap:10,borderTop:`4px solid ${w.color}`}}>
              <div style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.3}}>{w.label}</div>
              <p style={{fontSize:13,color:"var(--slate-500)",lineHeight:1.6,margin:0}}>{w.body}</p>
              <div style={{marginTop:"auto",paddingTop:10,borderTop:"1px dashed var(--mist)",display:"flex",flexDirection:"column",gap:5}}>
                <div style={{fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",lineHeight:1.45}}><span style={{color:"var(--slate-400)"}}>WHO · </span>{w.buyer}</div>
                <div style={{fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",lineHeight:1.45}}><span style={{color:"var(--slate-400)"}}>WHEN · </span>{w.signal}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="plan-kicker" style={{color:"var(--shark)",marginTop:34}}>Two bets we would add</div>
        <div className="qa-grid">
          {BETS.map((b,i) => (
            <div key={i} className="card" style={{padding:0,overflow:"hidden",display:"flex",flexDirection:"column",borderTop:`4px solid ${b.color}`}}>
              <div style={{padding:"20px 24px 16px",background:b.tint}}>
                <div style={{display:"flex",alignItems:"baseline",gap:10}}>
                  <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,fontWeight:800,color:b.color,letterSpacing:"0.08em",textTransform:"uppercase"}}>{b.n}</span>
                  <span style={{fontSize:18,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.3}}>{b.label}</span>
                </div>
                <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",marginTop:8,lineHeight:1.45}}><strong style={{color:"var(--slate-700)"}}>BUYER · </strong>{b.buyer}</div>
              </div>
              <div style={{padding:"18px 24px",display:"flex",flexDirection:"column",gap:14,flex:1}}>
                <p style={{fontSize:13.5,color:"var(--slate-700)",lineHeight:1.65,margin:0}}>{b.why}</p>
                <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:6}}>
                  {b.signals.map((s,j) => (
                    <li key={j} style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.4,display:"flex",gap:8}}>
                      <span style={{width:6,height:6,borderRadius:"50%",background:b.color,marginTop:6,flexShrink:0}}></span>{s}
                    </li>
                  ))}
                </ul>
                <div style={{fontSize:14,color:"var(--shark)",fontStyle:"italic",lineHeight:1.5}}>{b.open}</div>
                <div style={{marginTop:"auto",padding:"12px 14px",background:"#F6F8FB",border:"1px solid var(--mist)",borderRadius:10,fontSize:12.5,color:"var(--slate-700)",lineHeight:1.55}}>
                  <strong style={{color:b.color}}>How we test it · </strong>{b.test}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="card" style={{padding:"24px 26px",marginTop:22}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:12}}>Sequencing</div>
          <div className="seq-grid">
            {[
              { k:"Trial · 14 days", v:"CPG lookalikes and referral reactivation on LinkedIn and email. Bet 1 runs as one LinkedIn track. Quirk’s LA list built." },
              { k:"Pilot month 1", v:"Cashew-branded sending domains go live. Scale whichever trial track produced the most qualified replies." },
              { k:"Pilot month 2", v:"Bet 1 moves to email if the trial read is positive. Lookalikes from anything that closed feed the next list." },
              { k:"Pilot month 3", v:"Pre-show outreach for Quirk’s LA, then Chicago. The aim: meetings set before the show opens." },
            ].map((s,i) => (
              <div key={i}>
                <div style={{fontSize:13,fontWeight:700,color:"var(--shark)",marginBottom:4}}>{s.k}</div>
                <div style={{fontSize:13,color:"var(--slate-500)",lineHeight:1.55}}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 4: How it runs ────────────────────────
function Orchestration() {
  const steps = [
    { n:"1", t:"Playbook", d:"Built from your HubSpot and best customers through AI-assisted onboarding. The living document your SDRs and AE use too.", c:"#21A8F2" },
    { n:"2", t:"Targeting", d:"Lookalikes of the customers who closed, scored against live signals. A and B fit accounts only.", c:"#21A8F2" },
    { n:"3", t:"Messaging", d:"Email and LinkedIn sequences written to the signal that fired, approved by Cashew before anything sends.", c:"#9D4EDD" },
    { n:"4", t:"Delivery", d:"LinkedIn from your team’s real profiles. Email from separate sending domains, never cashewresearch.com, about 15 sends per inbox per day, no links, no open tracking.", c:"#9D4EDD" },
    { n:"5", t:"Replies", d:"One inbox for every reply, mirrored in Slack and HubSpot. The Reply Agent drafts in your voice. Your team approves.", c:"#0E9F66" },
    { n:"6", t:"Handoff", d:"Once a prospect says yes, your main domain is copied in and the meeting lands on your AE’s calendar. No bait and switch.", c:"#0E9F66" },
  ];
  return (
    <section className="section section-soft" id="orchestration">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">04 / How it runs</span>
          <h2>From a row in your market to a meeting on your AE’s calendar.</h2>
          <p>Six steps, one system, and the same funnel we report on every week: contacted, interested, qualified, booked. Not messages sent.</p>
        </div>
        <div className="trial-track">
          {steps.map((s,i) => (
            <div key={i} className="trial-step" style={{borderTop:`4px solid ${s.c}`}}>
              <div style={{display:"flex",alignItems:"center",gap:10}}>
                <span style={{width:24,height:24,borderRadius:"50%",background:s.c,color:"#fff",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:12,fontWeight:800}}>{s.n}</span>
                <span style={{fontSize:16,fontWeight:600,color:"var(--shark)"}}>{s.t}</span>
              </div>
              <p style={{fontSize:13,color:"var(--slate-500)",lineHeight:1.6,margin:0}}>{s.d}</p>
            </div>
          ))}
        </div>
        <div style={{marginTop:22,padding:"22px 26px",background:"var(--shark)",borderRadius:14,color:"#fff"}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600,marginBottom:10}}>Where your team fits</div>
          <div style={{fontSize:16.5,lineHeight:1.55,fontWeight:500,maxWidth:960}}>
            AICRO builds and runs top of funnel. Your SDRs work the replies, the inbound and the handoffs. Your AE closes. You, Addy and Rose see the whole funnel in one place every Monday, and we talk daily in Slack and weekly on a call about what is working.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Phase 1 — Detect ─────────────
function SignalMapVisual() {
  const nodes = [
    { x:"50%", y:"14%", cls:"hot",   tag:"NEW PRODUCT LINE LAUNCHED",  co:"Emerging snack brand · national retail listing" },
    { x:"22%", y:"36%", cls:"hot",   tag:"HEAD OF CONTENT HIRED",      co:"B2B fintech · building a research-led content program" },
    { x:"78%", y:"36%", cls:"warm",  tag:"AGENCY NEW-BUSINESS WIN",    co:"Creative agency · new CPG client announced" },
    { x:"22%", y:"66%", cls:"warm",  tag:"COMPETITOR REPORT RELEASED", co:"SaaS category · rival publishes a “state of” study" },
    { x:"78%", y:"66%", cls:"match", tag:"DIY SURVEY TOOLS ONLY",      co:"Consumer brand · one researcher, no panel partner" },
    { x:"50%", y:"86%", cls:"hot",   tag:"QUIRK’S SPEAKER LIST",       co:"Insights lead presenting in Chicago, March 2027" },
  ];
  return (
    <div className="signal-map">
      <div className="grid"></div>
      <div className="ring r4"></div>
      <div className="ring r3"></div>
      <div className="ring r2"></div>
      <div className="ring r1"></div>
      <div className="signal-pulse"></div>
      <div className="core">
        <span className="l">Cashew buyer signals</span>
        <span className="v" style={{fontSize:22}}>Daily</span>
        <span className="s">refresh · illustrative examples</span>
      </div>
      {nodes.map((n,i) => (
        <div key={i} className={"signal-node " + n.cls} style={{left:n.x, top:n.y}}>
          <span className="ndot"></span>
          <div className="nbody">
            <span className="ntag">{n.tag}</span>
            <span className="nco">{n.co}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function PhaseDetect() {
  const sources = [
    { lbl:"Leadership changes · new CMO, Head of Content, Head of Insights", val:"New leaders buy new tools in their first 90 days" },
    { lbl:"Product launches + retail listings at CPG brands",               val:"Every launch raises concept, claim and price questions" },
    { lbl:"Job posts · content, PR, insights and brand roles",              val:"The team is growing faster than its research budget" },
    { lbl:"Published reports + competitor studies",                         val:"They already value original data, or need to answer someone who has it" },
    { lbl:"Agency new-business announcements",                              val:"Fresh client, fresh need for proprietary insight" },
    { lbl:"Quirk’s, IIEX and CRIC speaker and attendee lists",              val:"Conference rosters carry buying intent windows" },
  ];
  return (
    <div>
      <SignalMapVisual/>
      <div className="signal-sources">
        {sources.map((s,i) => (
          <div key={i} className="signal-source-card">
            <span className="lbl">{s.lbl}</span>
            <span className="val">{s.val}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Phase 2 — Outreach ─────────────
function PhaseOutreach() {
  const products = [
    {
      mark:"send", name:"Email engine", tag:"SEPARATE SENDING DOMAINS",
      desc:"Cold email never leaves from cashewresearch.com. It runs on dedicated sending domains so your main domain, and every customer email and invoice on it, stays out of spam. About 15 sends per inbox per day, no links, no open tracking.",
      feats:["Main domain protected", "Warm on day one of the trial", "Throttle email vs LinkedIn any time"],
    },
    {
      mark:"connect", name:"LinkedIn engine", tag:"YOUR TEAM’S REAL PROFILES",
      desc:"You, your co-founders, your AE and SDRs sign in yourselves, and we never hold credentials. Executive profiles earn more replies than a generic rep, so the more of the team connects, the stronger the multi-channel motion.",
      feats:["No warm-up needed", "Title-tier sequencing", "Targeted for week one"],
    },
    {
      mark:"agent", name:"Outreach Agent", tag:"SIGNAL-GROUNDED PERSONALIZATION",
      desc:"Reads each buyer’s role, recent activity and the signal that fired, then writes the relevance line from your playbook. Everything is approved by Cashew before it sends.",
      feats:["Signal-grounded copy", "Cashew voice, your proof points", "Human sign-off"],
    },
  ];
  const markIcon = {
    send: (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>),
    connect: (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="11" x2="8" y2="17"/><circle cx="8" cy="7.5" r="1.2" fill="#fff" stroke="none"/><path d="M12 17v-4a3 3 0 0 1 6 0v4"/></svg>),
    agent: (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/></svg>),
  };
  return (
    <div className="outreach-stack">
      {products.map((p,i) => (
        <div key={i} className="outreach-card">
          <div className="ohead">
            <div className="ologo">
              <div className={"omark " + p.mark}>{markIcon[p.mark]}</div>
              <div>
                <div className="oname">{p.name}</div>
                <div className="otag">{p.tag}</div>
              </div>
            </div>
          </div>
          <div className="odesc">{p.desc}</div>
          <div className="ofeats">
            {p.feats.map((f,j) => <div key={j} className="ofeat">{f}</div>)}
          </div>
        </div>
      ))}
    </div>
  );
}

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

function ReplyAgentCard() {
  return (
    <SlackCard time="1:15 PM" subtitle="POSITIVE (Interested) · awaiting Cashew approval" subtitleDot="#3DDC97">
      <div className="slack-status-bar" style={{background:"rgba(255,133,89,0.14)",color:"#FF8559"}}>
        Draft only · nothing sends until a Cashew teammate approves or edits
      </div>
      <div className="slack-source-line"><strong>Source:</strong> 🔗 LinkedIn  |  <strong>Routed to:</strong> Cashew AE</div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Name:</span>
          <span className="v">Jordan Ellis (sample)</span>
          <span className="k" style={{marginTop:6}}>Job Title:</span>
          <span className="v">Director of Marketing</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Emerging snack brand · 40 staff</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">jordan@snackbrand.example</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">LI | New retail listing | CPG marketers</span>
        </div>
      </div>
      <div className="slack-pill"><span className="pdot"></span>Announced a national retail listing 9 days ago</div>
      <div className="slack-block">
        <span className="lbl">Last Reply:</span>
        <span className="val">Timely. We’re deciding between two packaging concepts for the launch and our agency quoted six weeks. How fast could you actually get us real shopper feedback, and do you have people who buy in our category?</span>
      </div>
      <div className="slack-block">
        <span className="lbl">Drafted Response:</span>
        <span className="val">Jordan, a two-concept test is exactly what we do. Fielding usually takes 24 to 72 hours with real respondents from our own panel, and you get a decision-ready report shortly after. On whether we can reach shoppers in your exact category, I’d rather confirm that with you than guess, so I’ll bring the targeting options to a 20-minute call. Tuesday at 11 or Thursday at 2 Eastern?</span>
      </div>
      <div className="slack-actions">
        <span className="slack-action success">✓ Approve + send</span>
        <span className="slack-action">✎ Edit</span>
        <span className="slack-action danger">Not an ICP</span>
        <span className="slack-action">📋 HubSpot</span>
        <span className="slack-action">🔗 LinkedIn</span>
      </div>
    </SlackCard>
  );
}

function PhaseConvert() {
  return (
    <div className="convert-grid">
      <div>
        <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"var(--slate-500)",textTransform:"uppercase",marginBottom:10,fontWeight:500}}>
          ↳ Reply Agent · live in Slack · sample
        </div>
        <ReplyAgentCard/>
      </div>
      <div className="convert-side">
        <div className="card" style={{padding:24}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#0E9F66",textTransform:"uppercase",fontWeight:700,marginBottom:10}}>Why this draft is safe to send</div>
          <ul className="plan-list">
            <li><strong>Every fact comes from your playbook:</strong> 24 to 72 hour fielding, real respondents, your own panel. All of it is on cashewresearch.com.</li>
            <li><strong>It does not guess.</strong> Category coverage is not in the playbook, so the draft says it will confirm rather than inventing an answer.</li>
            <li><strong>A person approves it.</strong> The draft waits in Slack for a Cashew teammate to approve or edit.</li>
            <li><strong>It asks for the meeting.</strong> Two specific times, so the yes is one word.</li>
          </ul>
        </div>
        <div className="card" style={{padding:24}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,marginBottom:10}}>The handoff</div>
          <p style={{fontSize:13,color:"var(--slate-500)",lineHeight:1.6,margin:0}}>Once the prospect says yes, your AE is copied in from the cashewresearch.com address and takes it from there. To the prospect it reads as one conversation: “Looping in my colleague to find a time.”</p>
        </div>
      </div>
    </div>
  );
}

// ─── Phase 4 — Compound ─────────────────
function PhaseCompound() {
  return (
    <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(260px,1fr))",gap:14}}>
      <div className="card" style={{padding:24}}>
        <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:10}}>Cadence</div>
        <h3 style={{marginBottom:8,fontSize:18}}>Daily in Slack.<br/>Weekly on a call.<br/>Monday funnel review.</h3>
        <p style={{fontSize:13,color:"var(--slate-500)"}}>What worked, what did not, and what changes this week, with the funnel in front of everyone.</p>
      </div>
      <div className="card" style={{padding:24}}>
        <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:10}}>Lookalike loop</div>
        <h3 style={{marginBottom:8,fontSize:18}}>Every customer you close<br/>makes the next one easier to find.</h3>
        <p style={{fontSize:13,color:"var(--slate-500)"}}>Closed-won accounts feed back into targeting, so the list sharpens toward the segments and titles that actually sign.</p>
      </div>
      <div className="card" style={{padding:24}}>
        <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:10}}>Living playbook</div>
        <h3 style={{marginBottom:8,fontSize:18}}>Your SDRs and AE get<br/>the same brain we use.</h3>
        <p style={{fontSize:13,color:"var(--slate-500)"}}>The playbook updates from HubSpot and call recordings, so a new hire ramps on what is working this month, not last year’s deck.</p>
      </div>
    </div>
  );
}

// ─── Signal to scale — color-coded tabs ─────────────────────────────────
function SignalToScale() {
  const phases = [
    {
      num:"PHASE 01", title:"Detect", head:"Find the buyer when the question is live.",
      body:"Leadership changes, product launches, content and insights hiring, competitor reports, agency wins, and conference rosters. A signal fires when a marketer or researcher has a question that needs real-people data now.",
      color:"#21A8F2", colorTint:"#E9F5FE",
      icon: (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>),
      Render: PhaseDetect,
    },
    {
      num:"PHASE 02", title:"Outreach", head:"Email and LinkedIn, one campaign.",
      body:"Email from separate sending domains so cashewresearch.com stays clean. LinkedIn from your team’s own profiles. Every message grounded in the signal that triggered it and approved by Cashew.",
      color:"#9D4EDD", colorTint:"#F4ECFE",
      icon: (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>),
      Render: PhaseOutreach,
    },
    {
      num:"PHASE 03", title:"Convert", head:"Replies handled with you, meetings booked.",
      body:"Every reply is classified, drafted from your playbook and waits for a Cashew teammate to approve. This is the answer to the vendor that told your prospects the wrong thing: the agent drafts, your people decide.",
      color:"#0E9F66", colorTint:"#E5F9F0",
      icon: (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg>),
      Render: PhaseConvert,
    },
    {
      num:"PHASE 04", title:"Compound", head:"Each month sharper than the last.",
      body:"Closed deals become lookalikes, the playbook updates itself from HubSpot, and the weekly review decides what to scale and what to cut.",
      color:"#FF8559", colorTint:"#FFEEE5",
      icon: (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>),
      Render: PhaseCompound,
    },
  ];
  const [active, setActive] = useState(0);
  const p = phases[active];
  const Body = p.Render;
  return (
    <section className="section section-soft" id="system">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">05 / The system in motion</span>
          <h2>Signal to scale, in four phases.</h2>
          <p>Click each phase to see what happens at that stage, tuned to Cashew’s buyers.</p>
        </div>
        <div className="s2s" style={{borderTop:`4px solid ${p.color}`,transition:"border-color .25s ease"}}>
          <div className="s2s-head" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:0}}>
            {phases.map((ph, i) => {
              const isActive = i === active;
              return (
                <div
                  key={i}
                  onClick={() => setActive(i)}
                  style={{
                    cursor:"pointer",
                    padding:"22px 24px",
                    background: isActive ? "#fff" : ph.colorTint,
                    borderBottom: isActive ? `4px solid ${ph.color}` : "4px solid transparent",
                    borderRight: i < 3 ? "1px solid var(--mist)" : "none",
                    display:"flex",alignItems:"center",gap:14,
                    transition:"all .2s ease",
                    position:"relative",
                  }}
                >
                  <div style={{
                    width:36,height:36,borderRadius:10,
                    background: ph.color,
                    color:"#fff",
                    display:"flex",alignItems:"center",justifyContent:"center",
                    flexShrink:0,
                    boxShadow: isActive ? `0 0 0 4px ${ph.colorTint}` : "none",
                    transition:"box-shadow .2s ease",
                  }}>
                    {ph.icon}
                  </div>
                  <div style={{display:"flex",flexDirection:"column",gap:2,minWidth:0}}>
                    <span style={{
                      fontFamily:"'JetBrains Mono',monospace",
                      fontSize:9.5,letterSpacing:"0.10em",fontWeight:600,
                      color: isActive ? ph.color : "var(--slate-500)",
                      textTransform:"uppercase",
                    }}>{ph.num} {isActive ? "· active" : "· click"}</span>
                    <span style={{
                      fontSize:17,fontWeight:600,letterSpacing:"-0.01em",
                      color: isActive ? "var(--shark)" : "var(--slate-700)",
                    }}>{ph.title}</span>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{padding:32, borderTop:`1px solid ${p.colorTint}`}}>
            <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:14}}>
              <span style={{
                padding:"4px 10px",borderRadius:99,
                background: p.colorTint, color: p.color,
                fontFamily:"'JetBrains Mono',monospace",fontSize:10,
                letterSpacing:"0.08em",fontWeight:700,textTransform:"uppercase",
              }}>{p.num} · {p.title}</span>
            </div>
            <div style={{display:"grid",gridTemplateColumns:"1fr",gap:14,marginBottom:24,maxWidth:780}}>
              <h3 style={{fontSize:24}}>{p.head}</h3>
              <p style={{color:"var(--slate-500)",fontSize:15}}>{p.body}</p>
            </div>
            <Body/>
          </div>
        </div>
      </div>
    </section>
  );
}


// ─── What we heard on the call ─────────────
function YourQuestions() {
  const qa = [
    {
      tag:"Accuracy", color:"#0E9F66",
      said:"We tried this before. The agent gave prospects answers that were just wrong.",
      answer:"Nothing reaches a prospect until a Cashew teammate approves it.",
      detail:"The Reply Agent drafts each response from your playbook and posts it to Slack, your inbox and HubSpot. Your team approves, edits or rejects it. When a question falls outside the playbook, the draft says so and routes it to you instead of guessing.",
      proof:"Every draft and every approval visible in Slack from Day 5",
    },
    {
      tag:"Speed", color:"#21A8F2",
      said:"New inboxes take two weeks to warm up. What actually gets done in two weeks?",
      answer:"Both channels are set to go live in the first week.",
      detail:"LinkedIn runs from your team’s own profiles and needs no warm-up. Email runs from AICRO’s infrastructure, which is already warm, under an appointment-setter persona. Cashew-branded domains warm in parallel and are ready for Day 15.",
      proof:"Target: campaigns live by Day 5, once systems are connected at kickoff",
    },
    {
      tag:"Cost and team", color:"#9D4EDD",
      said:"So a service like this replaces an individual, not the team?",
      answer:"Compare us to your next hire, not your team. Then keep the team you have.",
      detail:"$10,000 a month buys the output of an outbound seat without the cost of building one. Your SDRs stay where they create the most value: working replies and handoffs, learning the pitch, and growing into the AEs you promote next. The SDR seat is the most cost-efficient place to develop sales talent, so we feed it rather than replace it. You know the conversion in your business better than we do. Our job is to make the top of the funnel predictable, so your conversion compounds on a steady flow instead of whatever referrals bring in that month.",
      points:["Another W2 salary, benefits and per-meeting pay","Months of ramp before steady pipeline","Data, sending domains, LinkedIn tools and AI licences","Your time hiring, onboarding and managing the seat"],
      pointsLabel:"What you avoid",
      close:"Think of it as a co-pilot for you and the team: one predictable source of qualified conversations that grows with volume, not headcount, and that your people convert.",
      proof:"Qualified replies routed to your SDRs, meetings to your AE",
    },
    {
      tag:"Deliverability", color:"#FF8559",
      said:"Today we send cold email through Gmail.",
      answer:"Move cold email off your main domain, whatever you decide about us.",
      detail:"Once spam complaints pass roughly 3 per 1,000, cold volume on cashewresearch.com puts every customer email, invoice and renewal at risk. Quick test: send a few emails from a fresh Gmail account to your own team and see whether they land in Primary, Promotions or Spam.",
      proof:"Cold email never touches cashewresearch.com",
    },
  ];
  return (
    <section className="section section-soft" id="questions">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>02 / What we heard</span>
          <h2>Four things from Thursday’s call, answered plainly.</h2>
          <p>These decide whether the rest of this page matters, so they come first.</p>
        </div>
        <div className="heard-list">
          {qa.map((x,i) => (
            <div key={i} className="heard-row">
              <div className="heard-said">
                <span className="heard-tag" style={{background:x.color}}>{x.tag}</span>
                <div className="heard-who">From the call</div>
                <div className="heard-quote">{x.said}</div>
              </div>
              <div className="heard-answer">
                <div className="heard-headline">{x.answer}</div>
                <p className="heard-detail">{x.detail}</p>
                {x.points && (
                  <div className="heard-points">
                    <div className="heard-points-label" style={{color:x.color}}>{x.pointsLabel}</div>
                    <ul>
                      {x.points.map((pt,j) => <li key={j}>{pt}</li>)}
                    </ul>
                  </div>
                )}
                {x.close && <p className="heard-detail" style={{color:"var(--shark)",fontWeight:500}}>{x.close}</p>}
                <div className="heard-proof" style={{borderColor:x.color}}>
                  <span style={{color:x.color}}>In the trial · </span>{x.proof}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── The 14-day trial ─────────────
const TRIAL_STEPS = [
  { day:"Day 0", title:"Kickoff call", color:"#21A8F2",
    body:"30 minutes with Doug. Connect HubSpot, connect the LinkedIn seats you choose (you sign in yourselves, we never hold credentials), open a shared Slack channel.",
    out:"Systems connected" },
  { day:"Days 1 to 3", title:"The playbook, built for you", color:"#21A8F2",
    body:"AI-assisted onboarding reads your HubSpot history and your best customers, then drafts the Cashew playbook: verticals that convert, buyer titles, proof points, objections. You correct it, you do not write it.",
    out:"Cashew playbook + ICP map" },
  { day:"Days 3 to 5", title:"Messaging, approved by you", color:"#9D4EDD",
    body:"Email and LinkedIn sequences for the trial tracks, drafted for your sign-off. Nothing sends without approval from you or a co-founder.",
    out:"Approved sequences" },
  { day:"Day 5 onward", title:"Live on LinkedIn and email", color:"#9D4EDD",
    body:"LinkedIn from your team’s profiles. Email from AICRO’s warm infrastructure. Cashew-branded sending domains start warming in parallel so a pilot starts with no gap.",
    out:"Campaigns live" },
  { day:"Day 5 to 14", title:"Replies, handled with you", color:"#0E9F66",
    body:"Every reply lands in one inbox, in Slack, and in HubSpot with a drafted response. Your team approves, the meeting gets booked, and your main domain is copied in so the prospect sees one smooth handoff.",
    out:"Every reply handled with you, meetings booked as they come" },
  { day:"Day 14", title:"Trial review", color:"#FF8559",
    body:"We walk the full funnel together: contacted, interested, qualified, booked, by segment and channel. What worked, what did not, and what the next 90 days would target.",
    out:"Go / no-go on the pilot" },
];

const TRIAL_PREP = [
  { id:"hubspot", label:"HubSpot admin available for a 10-minute connect on the kickoff call" },
  { id:"seats", label:"List of LinkedIn profiles willing to connect (you, co-founders, AE, SDRs)" },
  { id:"best", label:"Five best-fit customers and three deals you lost, by name" },
  { id:"verticals", label:"Segments to prioritize, and any to keep out of scope" },
  { id:"dnc", label:"Do-not-contact list: current customers, open opportunities, partners" },
  { id:"calendar", label:"Booking link for whoever takes first meetings" },
  { id:"recorder", label:"Call-recorder access, if you use one (optional)" },
  { id:"seedtest", label:"Gmail seed test done: where do your own cold emails land today?" },
];

function TrialPrepChecklist() {
  const KEY = "aicro-cashew-trial-prep";
  const [done, setDone] = useState(() => {
    try { return JSON.parse(localStorage.getItem(KEY) || "{}"); } catch (e) { return {}; }
  });
  const toggle = (id) => {
    const next = Object.assign({}, done);
    next[id] = !next[id];
    setDone(next);
    try { localStorage.setItem(KEY, JSON.stringify(next)); } catch (e) {}
  };
  const count = TRIAL_PREP.filter(p => done[p.id]).length;
  return (
    <div className="card" style={{padding:"26px 28px"}}>
      <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:12,flexWrap:"wrap",marginBottom:6}}>
        <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700}}>Before kickoff · what we need from Cashew</div>
        <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,color:"var(--slate-500)"}}>{count} of {TRIAL_PREP.length} ready</div>
      </div>
      <div style={{height:6,background:"#F1F5F9",borderRadius:99,overflow:"hidden",margin:"8px 0 16px 0"}}>
        <div style={{height:"100%",width:(count / TRIAL_PREP.length * 100) + "%",background:"#0E9F66",transition:"width .25s ease"}}></div>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:4}}>
        {TRIAL_PREP.map(p => (
          <label key={p.id} className="prep-row">
            <input type="checkbox" checked={!!done[p.id]} onChange={() => toggle(p.id)}/>
            <span style={{textDecoration: done[p.id] ? "line-through" : "none", color: done[p.id] ? "var(--slate-400)" : "var(--slate-700)"}}>{p.label}</span>
          </label>
        ))}
      </div>
      <div style={{marginTop:14,fontSize:12,color:"var(--slate-500)",lineHeight:1.55}}>
        Ticks are saved in this browser only, as your own prep list. About an hour of your team&rsquo;s time in total, most of it on the kickoff call.
      </div>
    </div>
  );
}

function Trial() {
  return (
    <section className="section" id="trial">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>08 / The 14-day trial</span>
          <h2>Two weeks, live, on your market. Here is exactly what happens.</h2>
          <p>The trial is the real engine on real Cashew buyers, not a demo account. You approve everything that goes out, you see every reply, and on Day 14 you decide with the full funnel in front of you.</p>
        </div>
        <div className="trial-track">
          {TRIAL_STEPS.map((s,i) => (
            <div key={i} className="trial-step" style={{borderTop:`4px solid ${s.color}`}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:s.color,textTransform:"uppercase",fontWeight:700}}>{s.day}</div>
              <div style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.3}}>{s.title}</div>
              <p style={{fontSize:13,color:"var(--slate-500)",lineHeight:1.6,margin:0,flex:1}}>{s.body}</p>
              <div style={{paddingTop:10,borderTop:"1px dashed var(--mist)",fontSize:11.5,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.02em"}}>
                <span style={{color:"var(--slate-400)"}}>YOU GET · </span>{s.out}
              </div>
            </div>
          ))}
        </div>

        <div className="trial-split">
          <TrialPrepChecklist/>
          <div className="card" style={{padding:"26px 28px",background:"var(--shark)",color:"#fff",display:"flex",flexDirection:"column",gap:14}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"rgba(255,255,255,.55)",textTransform:"uppercase",fontWeight:700}}>Day 14 · how the review works</div>
            <div style={{fontSize:18,fontWeight:600,lineHeight:1.4}}>You see the whole funnel, by segment and channel, with every reply attached.</div>
            <ul className="dark-list">
              <li><strong>Contacted</strong> · who we reached, on which channel, with which message</li>
              <li><strong>Interested (MQL)</strong> · every positive reply, verbatim</li>
              <li><strong>Qualified (SQL)</strong> · a real forward signal: asked to meet, asked for pricing or a demo, or named a need</li>
              <li><strong>Booked</strong> · meetings on your calendar, and who took them</li>
              <li><strong>Learned</strong> · which verticals and titles respond, and what we would change</li>
            </ul>
            <div style={{marginTop:"auto",padding:"14px 16px",background:"rgba(255,255,255,0.06)",border:"1px solid rgba(255,255,255,0.12)",borderRadius:10,fontSize:13,lineHeight:1.6,color:"rgba(255,255,255,0.8)"}}>
              <strong style={{color:"#fff"}}>The one ask.</strong> The trial is real work on our side, so we ask that it is a real evaluation on yours: if the review shows it working, the pilot starts on Day 15 with no gap. Campaigns keep running, the Cashew domains are already warm, and nothing restarts. If it is not, you still keep this plan.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── The product (real screens) ─────────────────
function ProductScreens() {
  const shots = [
    { src:"uploads/pasted-1777222339189-0.png", label:"Executive Summary",          caption:"The Monday view. Email and LinkedIn side by side, weekly positive replies, every campaign with its full funnel." },
    { src:"uploads/pasted-1777222392601-0.png", label:"Campaign Drawer",            caption:"Click any campaign to drill in: requests, accepted, replied, positive, meeting, end to end." },
    { src:"uploads/pasted-1777222050657-0.png", label:"Reply Agent in Slack",       caption:"A reply hits Slack within minutes, classified, with a drafted response waiting for your team’s approval." },
    { src:"uploads/pasted-1777222220819-0.png", label:"Sales Action · AICRO Rounds",caption:"Stalled opportunities in your CRM, graded and routed to the right rep with a suggested next step." },
  ];
  return (
    <section className="section section-dark" id="product">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow" style={{color:"rgba(255,255,255,.5)"}}>06 / The product</span>
          <h2>The platform, as it runs for clients today.</h2>
          <p style={{color:"rgba(255,255,255,.6)"}}>Four screens from the live AICRO product, client data anonymized. During the trial you get your own login, with Cashew’s campaigns and replies in it.</p>
        </div>
        <div className="qa-grid">
          {shots.map((s,i) => (
            <div key={i} style={{background:"#fff",border:"1px solid rgba(255,255,255,0.10)",borderRadius:14,overflow:"hidden",boxShadow:"0 1px 2px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.30)"}}>
              <div style={{padding:"10px 16px",background:"#F1F5F9",borderBottom:"1px solid #E2E8F0",display:"flex",alignItems:"center",gap:10}}>
                <span style={{width:8,height:8,borderRadius:"50%",background:"#21A8F2"}}></span>
                <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#334155",fontWeight:600,textTransform:"uppercase"}}>{s.label}</span>
              </div>
              <img src={s.src} alt={s.label} style={{display:"block",width:"100%",height:"auto"}}/>
              <div style={{padding:"14px 18px",fontSize:13,color:"#64748B",lineHeight:1.55}}>{s.caption}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Proof ─────────────────
function CaseStudies() {
  const cases = [
    {
      co: "Lucra",
      stage: "B2B SaaS · closest read on Cashew",
      sector: "Sports technology platform",
      quote: "A B2B software company with a lean sales team, the same shape as Cashew. AICRO runs email and LinkedIn outbound into their buyers, and their own SDR works the positive replies into meetings.",
      attr: "Lucra · first ~2.5 months of the engagement, per Lucra’s HubSpot",
      systems: ["Lookalike Targeting", "Email + LinkedIn Outbound", "Reply Triage", "SDR Handoff"],
      metrics: [
        { v: "$655K+", l: "known ARR pipeline", live: true },
        { v: "27%", l: "of all Lucra meetings" },
        { v: "24", l: "attributed deals" },
      ],
    },
    {
      co: "Capitalize",
      stage: "AI · scaled to Series B",
      sector: "Data & AI platform",
      quote: "We went through three or four iterations before AICRO. The team engineered a complete GTM system that was instrumental in securing our Series B.",
      attr: "Luke Morris · Co-founder",
      systems: ["Signal-First Outbound", "Full-Funnel Revenue Engineering", "HubSpot GTM build", "CRO-led enablement"],
      metrics: [
        { v: "Series B", l: "secured", live: true },
        { v: "+187%", l: "pipeline / 90d" },
        { v: "AI-native", l: "GTM" },
      ],
    },
    {
      co: "Gumption",
      stage: "Marketplace",
      sector: "Debt marketplace",
      quote: "Before AICRO we were scaling linearly. Now we scale exponentially.",
      attr: "John Dickerson · Co-founder",
      systems: ["Signal-Based Deal Flow Engine", "AI Multi-Channel Outbound", "Predictive Lead Scoring", "CRO-Built Playbooks"],
      metrics: [
        { v: "$75M+", l: "qualified pipeline", live: true },
        { v: "2×", l: "conversion" },
        { v: "3.5×", l: "deal velocity" },
      ],
    },
    {
      co: "Henry AI",
      stage: "AI-native platform",
      sector: "AI platform · capital markets",
      quote: "An AI platform with product-market fit that needed a net-new pipeline engine above it. AICRO runs their cold outbound end to end.",
      attr: "Henry AI · AI platform engagement",
      systems: ["Lookalike Targeting", "Operator-to-Operator Outbound", "Signal-Based Sequencing", "Reply Triage"],
      metrics: [
        { v: "AI-native", l: "product", live: true },
        { v: "Outbound", l: "run by AICRO" },
        { v: "Multi-channel", l: "engine" },
      ],
    },
    {
      co: "RemoteLock",
      stage: "SaaS · LinkedIn-led",
      sector: "Smart access SaaS",
      quote: "Operator-to-operator LinkedIn messaging that gets named enterprise accounts replying. The LinkedIn motion we would run from your team’s profiles.",
      attr: "RemoteLock · SaaS engagement",
      systems: ["Operator-to-Operator Outbound", "Vertical Segmentation", "Stack-Specific Targeting", "Reply Triage + Routing"],
      metrics: [
        { v: "47%", l: "LinkedIn PRR", live: true },
        { v: "Greystar", l: "+ Namdar replied" },
        { v: "LinkedIn", l: "led" },
      ],
    },
    {
      co: "Worth Clark",
      stage: "Services firm",
      sector: "Brokerage",
      quote: "Around half of every positive responder schedules a call immediately. The combination of reach and close rate is why this motion scales.",
      attr: "Worth Clark · engagement",
      systems: ["Multi-Channel Outbound", "Recruiting Funnel", "Reply Triage", "CRO-led Cadence"],
      metrics: [
        { v: "~50%", l: "of positives → meeting", live: true },
        { v: "Fast", l: "reply-to-call" },
        { v: "Multi-channel", l: "engine" },
      ],
    },
  ];
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">07 / Proof</span>
          <h2>Real clients, real numbers. Ask to speak with any of them.</h2>
          <p>Lucra is the closest read on Cashew: B2B software, a lean team, and an SDR who works the replies we generate. Ask us for an introduction to any of them.</p>
        </div>
        <div className="cs-grid-r">
          {cases.map((c,i) => (
            <div className="cs-card" key={i}>
              <div className="cs-head">
                <div>
                  <div className="cs-co">{c.co}</div>
                  <div style={{fontSize:12,color:"var(--slate-500)",marginTop:2}}>{c.sector}</div>
                </div>
                <span className="cs-stage">{c.stage}</span>
              </div>
              <div className="cs-body">
                <p className="cs-quote">{c.quote}</p>
                <div className="cs-attr">{c.attr}</div>
                <div className="cs-systems">
                  <span className="cs-systems-lbl">Systems delivered</span>
                  {c.systems.map((s,j) => <div className="cs-system" key={j}>{s}</div>)}
                </div>
              </div>
              <div className="cs-metrics">
                {c.metrics.map((m,j) => (
                  <div className="cs-metric" key={j}>
                    <span className={"v " + (m.live ? "live" : "")}>{m.v}</span>
                    <span className="l">{m.l}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Economics · funnel calculator ─────────────────
const PILOT_MONTHS = 3;
const PILOT_FEE = 10000;
const FUNNEL_INPUTS = [
  { k:"contacted", label:"Prospects contacted per month", min:2000, max:10000, step:500, def:5000, fmt:(v) => v.toLocaleString("en-US"),
    note:"Planning assumption. We set the real number on Day 1 from your list size and how many LinkedIn seats connect." },
  { k:"posRate", label:"Positive reply rate (MQL)", min:0.5, max:2, step:0.1, def:1.0, fmt:(v) => v.toFixed(1) + "%",
    note:"Share of prospects contacted who reply with interest. Lucra all-time: 1.1%. Another AICRO client, first 23 days: 1.3%." },
  { k:"sqlRate", label:"Positive to qualified (SQL)", min:25, max:70, step:1, def:40, fmt:(v) => v + "%",
    note:"Qualified means a real forward signal: asked to meet, asked for pricing or a demo, or named a need. Lucra: 42%. Another AICRO client: 66% to 67%." },
  { k:"mtgRate", label:"Qualified to meeting booked", min:15, max:50, step:1, def:30, fmt:(v) => v + "%",
    note:"Lucra all-time: 28%. Across AICRO clients, about 20% of all positive replies become a booked meeting." },
  { k:"asp", label:"Average deal size", min:8000, max:30000, step:1000, def:18000, fmt:(v) => "$" + (v/1000).toFixed(0) + "K",
    note:"Your HubSpot average, per the call." },
  { k:"closeRate", label:"Your meeting to closed-won rate", min:5, max:40, step:1, def:20, fmt:(v) => v + "%",
    note:"Yours to set. Your AE knows this number better than we do." },
];

function money(v) {
  if (v >= 1000000) return "$" + (v/1000000).toFixed(2) + "M";
  if (v >= 10000) return "$" + Math.round(v/1000) + "K";
  return "$" + Math.round(v).toLocaleString("en-US");
}

function CostCompare() {
  const init = {};
  FUNNEL_INPUTS.forEach(f => { init[f.k] = f.def; });
  const [v, setV] = useState(init);
  const set = (k, x) => { const n = Object.assign({}, v); n[k] = Number(x); setV(n); };

  const fee = PILOT_FEE * PILOT_MONTHS;
  const contacted = v.contacted * PILOT_MONTHS;
  const mql = contacted * v.posRate / 100;
  const sql = mql * v.sqlRate / 100;
  const mtg = sql * v.mtgRate / 100;
  const pipe = mtg * v.asp;
  const won = mtg * v.closeRate / 100;
  const wonRev = won * v.asp;

  const stages = [
    { l:"Prospects contacted", n:contacted, c:"#94A3B8" },
    { l:"Positive replies · MQL", n:mql, c:"#21A8F2" },
    { l:"Qualified · SQL", n:sql, c:"#9D4EDD" },
    { l:"Meetings booked", n:mtg, c:"#0E9F66" },
  ];
  const maxLog = Math.log10(contacted + 1);

  return (
    <section className="section section-soft" id="economics">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">09 / Model the pilot</span>
          <h2>Model the pilot with your own numbers.</h2>
          <p>After the 14-day trial, the pilot is $10,000 USD a month for three months. This is a planning model, not a forecast or a promise. Results depend on your market, your list, your offer and your sales process, and you know your conversion better than we do. The defaults are drawn from AICRO client results so you have a starting point; move them to what you believe about Cashew.</p>
        </div>
        <div className="commit-split">
          <div className="card commit-card">
            <div className="commit-label" style={{color:"#0E9F66"}}>What we commit to</div>
            <ul>
              <li>Your playbook and ICP built and signed off by you</li>
              <li>Campaigns targeted to go live within the first week of the trial, once HubSpot and LinkedIn are connected</li>
              <li>Every reply drafted for your team&rsquo;s approval. Nothing sends without it</li>
              <li>Weekly reporting on every stage: contacted, MQL, SQL and meetings booked</li>
              <li>A weekly review with Doug on what is working and what changes</li>
            </ul>
          </div>
          <div className="card commit-card">
            <div className="commit-label" style={{color:"var(--slate-500)"}}>What we model, not promise</div>
            <ul>
              <li>Reply, qualification and meeting rates</li>
              <li>Pipeline created and revenue closed</li>
              <li>Cost per SQL and per meeting</li>
            </ul>
            <p>These depend on Cashew&rsquo;s market and team. The trial replaces our assumptions with an early read on your own numbers, and the pilot is judged on what is measured, not on this model.</p>
          </div>
        </div>

        <div className="calc">
          <div className="card calc-inputs">
            {FUNNEL_INPUTS.map(f => (
              <div key={f.k} className="calc-row">
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",gap:10}}>
                  <label htmlFor={"in-" + f.k} style={{fontSize:13.5,fontWeight:600,color:"var(--shark)"}}>{f.label}</label>
                  <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:14,fontWeight:700,color:"#0E7DBC"}}>{f.fmt(v[f.k])}</span>
                </div>
                <input id={"in-" + f.k} type="range" min={f.min} max={f.max} step={f.step} value={v[f.k]} onChange={(e) => set(f.k, e.target.value)}/>
                <div style={{fontSize:11.5,color:"var(--slate-500)",lineHeight:1.5}}>{f.note}</div>
              </div>
            ))}
            <button className="calc-reset" onClick={() => setV(init)}>Reset to defaults</button>
          </div>

          <div className="calc-out">
            <div className="card" style={{padding:"24px 26px"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,marginBottom:16}}>Modeled 3-month funnel</div>
              <div style={{display:"flex",flexDirection:"column",gap:12}}>
                {stages.map((s,i) => {
                  const w = Math.max(6, Math.log10(s.n + 1) / maxLog * 100);
                  return (
                    <div key={i}>
                      <div style={{display:"flex",justifyContent:"space-between",fontSize:13,color:"var(--slate-700)",marginBottom:5}}>
                        <span>{s.l}</span>
                        <strong style={{color:"var(--shark)",fontFamily:"'JetBrains Mono',monospace"}}>{Math.round(s.n).toLocaleString("en-US")}</strong>
                      </div>
                      <div style={{height:10,background:"#EEF2F6",borderRadius:99,overflow:"hidden"}}>
                        <div style={{height:"100%",width:w + "%",background:s.c,borderRadius:99,transition:"width .25s ease"}}></div>
                      </div>
                    </div>
                  );
                })}
              </div>
              <div style={{marginTop:14,fontSize:12,color:"var(--slate-500)"}}>At these inputs, roughly <strong style={{color:"var(--shark)"}}>{Math.round(mtg / PILOT_MONTHS)}</strong> meetings a month. An estimate, not a commitment.</div>
            </div>

            <div className="calc-tiles">
              {[
                { l:"Modeled pipeline", v:money(pipe), d:"meetings × your average deal", c:"#0E9F66" },
                { l:"Modeled cost per meeting", v:money(fee / Math.max(mtg, 1)), d:"$30K pilot ÷ modeled meetings", c:"var(--shark)" },
                { l:"Modeled cost per SQL", v:money(fee / Math.max(sql, 1)), d:"$30K pilot ÷ modeled SQLs", c:"var(--shark)" },
                { l:"Modeled pipeline per $1", v:"$" + (pipe / fee).toFixed(1), d:"modeled pipeline ÷ pilot fee", c:"#0E9F66" },
              ].map((t,i) => (
                <div key={i} className="card" style={{padding:"18px 18px"}}>
                  <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.1em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700}}>{t.l}</div>
                  <div style={{fontSize:28,fontWeight:600,color:t.c,letterSpacing:"-0.02em",margin:"6px 0 4px"}}>{t.v}</div>
                  <div style={{fontSize:11.5,color:"var(--slate-500)"}}>{t.d}</div>
                </div>
              ))}
            </div>

            <div className="card" style={{padding:"20px 24px",background:"var(--shark)",color:"#fff"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"rgba(255,255,255,.55)",textTransform:"uppercase",fontWeight:700,marginBottom:8}}>If those meetings close</div>
              <div style={{fontSize:15,lineHeight:1.55}}>
                At a <strong>{v.closeRate}%</strong> close rate, the model shows about <strong>{won.toFixed(1)}</strong> customers and <strong>{money(wonRev)}</strong> in new revenue, closing on your sales cycle rather than inside the pilot window. That would be <strong>{(wonRev / fee).toFixed(1)}×</strong> the pilot fee, before any renewal or expansion.
              </div>
            </div>
          </div>
        </div>

        <div className="calc-foot">
          A planning model, not a guarantee of results. Defaults are drawn from AICRO client results; client figures come from their live AICRO reporting, and the cross-client meeting rate from AICRO’s dataset of 500+ campaigns. Other clients’ results do not predict Cashew’s. The trial gives you an early read on Cashew’s own numbers.
        </div>
      </div>
    </section>
  );
}

// ─── Position ─────────────────────────────────────
function Matrix() {
  const cols = ["Outsourced SDR agency", "Another in-house SDR", "DIY tool stack", "AICRO"];
  const rows = [
    { row: "Live in the first two weeks", vals: [2, 1, 2, 4], aicro: "Targeted for Day 5 of the trial" },
    { row: "Replies a human approves", vals: [1, 3, 2, 4], aicro: "Every draft, in Slack" },
    { row: "Main domain protected", vals: [2, 1, 1, 4], aicro: "Separate sending domains" },
    { row: "Reports meetings, not messages", vals: [1, 2, 1, 4], aicro: "Qualified + booked funnel" },
    { row: "Revenue operator in the room", vals: [1, 1, 1, 4], aicro: "Weekly, plus daily Slack" },
    { row: "Cost predictability", vals: [3, 2, 2, 4], aicro: "One monthly fee" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">10 / Position</span>
          <h2>Not an agency. Not a tool. A fractional revenue team.</h2>
          <p>Strategy, delivery and software in one engagement, inside your HubSpot, next to your team.</p>
        </div>
        <div className="matrix" style={{overflowX:"auto"}}>
          <table>
            <thead>
              <tr>
                <th style={{width:"24%"}}> </th>
                {cols.map((c,i) => (<th key={i} className={c === "AICRO" ? "aicro" : ""}>{c}</th>))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r,i) => (
                <tr key={i}>
                  <td className="row-label">{r.row}</td>
                  {r.vals.map((v,j) => (
                    <td key={j} className={j === 3 ? "aicro" : ""}>
                      {j === 3 ? (
                        <span style={{display:"inline-flex",alignItems:"center",gap:8,fontWeight:500,color:"var(--slate-900)"}}>
                          <span style={{width:14,height:14,borderRadius:"50%",background:"var(--mint-tint)",color:"var(--mint-deep)",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:10,fontWeight:700}}>✓</span>
                          {r.aicro}
                        </span>
                      ) : (
                        <span className="dot-row">
                          {[1,2,3,4].map(d => (<span key={d} className={"d " + (d <= v ? "on" : "")}></span>))}
                        </span>
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ─── 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)"}}>11 / Start the trial</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>Rich, book the kickoff and the trial starts that day.</h2>
            <p>You said you, Addy and Rose are deciding on a plan next week. The fastest way to decide is with Cashew’s own early numbers in front of you. Book a 30-minute kickoff, bring whoever owns HubSpot, and we connect the systems on the call. Fourteen days later we review the full funnel together and you decide. If it would help to walk the co-founders through this page first, book the same link and we will do that instead.</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 trial kickoff →
              </a>
              <a href="#trial" style={{fontSize:14,color:"rgba(255,255,255,0.8)",textDecoration:"underline"}}>Review the prep checklist</a>
            </div>
            <div style={{marginTop:18,fontSize:12,color:"rgba(255,255,255,0.5)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>
              calendly.com/doug-aicro/custom-demo-qa · or reply to Doug directly at doug@aicro.co
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

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

// ─── App ─────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <Fragment>
      <Nav/>
      <Hero dark={t.darkHero}/>
      <TrustStrip/>
      <MarketThesis/>
      <YourQuestions/>
      <GTMPlan/>
      <Orchestration/>
      <SignalToScale/>
      <ProductScreens/>
      <CaseStudies/>
      <Trial/>
      <CostCompare/>
      <Matrix/>
      <CTA/>
      <Footer/>
      <TweaksPanel>
        <TweakSection label="Surface"/>
        <TweakRadio
          label="Hero treatment"
          value={t.darkHero ? "dark" : "light"}
          options={["dark", "light"]}
          onChange={(v) => setTweak('darkHero', v === "dark")}
        />
      </TweaksPanel>
    </Fragment>
  );
}

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