// AICRO · SecureAuth · Agent Authority go-to-market brief + 2-week pilot (Membio pattern, no pricing)
// Built 2026-10-06 from the public record only (no call yet). Sources: prospects/secureauth/Prospect Docs/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">Agent Authority GTM</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">Why now</a>
            <a href="#buyers">Buyers</a>
            <a href="#works">What works</a>
            <a href="#campaigns">Campaigns</a>
            <a href="#trial">Pilot</a>
            <a href="#cases">Proof</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#plan" className="btn btn-ghost btn-sm">The plan</a>
          <a href={CALENDLY} target="_blank" rel="noopener" className="btn btn-primary btn-sm">Scope the pilot</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>SecureAuth · Agent Authority go-to-market brief · October 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          Who buys Agent Authority first.<br/>
          What has worked reaching them.<br/>
          <span style={{color:"#21A8F2"}}>And a two-week pilot to prove it.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:920}}>
          Built from SecureAuth&rsquo;s Agent Authority release and from AICRO&rsquo;s own campaign data across 443+ campaigns. Where the buyers are, what has and has not worked reaching buyers like them, the campaigns we would run first, and a 14-day pilot to test them. No price attached to this page.
        </p>
        <div className="hero-cta-row">
          <a href="#buyers" className="btn btn-primary btn-lg">Start with the buyers →</a>
          <a href="#works" className={dark ? "btn btn-outline-light btn-lg" : "btn btn-ghost btn-lg"}>What has worked</a>
        </div>
        <div className="hero-stats">
          {[
            {v:"6 → 4", l:"capabilities on the product page · four distinct buyers"},
            {v:"6.5×", l:"conference vs evergreen campaigns · AICRO data"},
            {v:"Dec 7-9", l:"Gartner IAM Summit · the first window"},
            {v:"14 days", l:"pilot · no CRM integration needed"},
          ].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>
  );
}

// ─── 02 · Buyer map ─────────────
function BuyerMap() {
  const caps = [
    { cap:"Agent Identity & Discovery", line:"Every other control depends on knowing which agent is acting and which user it is acting for.", owner:"CISO · Security operations", buyer:"Security", c:"#21A8F2" },
    { cap:"Runtime Authorization & Enforcement", line:"Every call is decided as it happens, based on the agent acting, the delegating user and the context.", owner:"Head of IAM · Enterprise architect", buyer:"Identity", c:"#9D4EDD" },
    { cap:"Detection & Risk", line:"Abnormal behavior from an agent within reach of sensitive data is flagged before it becomes an incident.", owner:"SOC lead · Detection and response", buyer:"Security", c:"#21A8F2" },
    { cap:"Prompt & Data Protection", line:"Responses are masked or blocked in flight, so your data is protected from agents reading it.", owner:"Data protection · Privacy · Compliance", buyer:"Risk and compliance", c:"#0E9F66" },
    { cap:"Cost & Operational Controls", line:"Spend is attributed to the agents, people and teams driving it, and capped before a loop runs up the bill.", owner:"AI platform owner · CIO’s office", buyer:"AI platform", c:"#FF8559" },
    { cap:"Evidence & Traceability", line:"Agent Trail records every call an agent made, the delegating user, the context it carried, and the rule that decided it.", owner:"Compliance · Audit · Risk", buyer:"Risk and compliance", c:"#0E9F66" },
  ];
  const buyers = [
    { b:"Security", c:"#21A8F2", d:"Owns discovery and detection. Hears risk: shadow agents, over-reach, incidents." },
    { b:"Identity", c:"#9D4EDD", d:"Owns authorization. Hears control: every call decided, alongside the IdP already in place." },
    { b:"AI platform", c:"#FF8559", d:"Owns the rollout. Hears speed and spend: the security sign-off that lets agents ship." },
    { b:"Risk and compliance", c:"#0E9F66", d:"Owns evidence. Hears audit: a record of every call and the rule that decided it." },
  ];
  return (
    <section className="section section-soft" id="buyers">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>02 / Who buys it</span>
          <h2>Six capabilities. Four buyers.</h2>
          <p>Each capability on the Agent Authority page answers a different person&rsquo;s problem. That is the targeting plan, already written by the product. Quotes below are SecureAuth&rsquo;s own wording.</p>
        </div>
        <div className="cap-grid">
          {caps.map((x,i) => (
            <div key={i} className="card" style={{padding:"20px 22px",display:"flex",flexDirection:"column",gap:10,borderTop:`4px solid ${x.c}`}}>
              <div style={{fontSize:15.5,fontWeight:600,color:"var(--shark)",lineHeight:1.3}}>{x.cap}</div>
              <p style={{fontSize:13,color:"var(--slate-500)",lineHeight:1.6,margin:0,fontStyle:"italic"}}>&ldquo;{x.line}&rdquo;</p>
              <div style={{marginTop:"auto",paddingTop:10,borderTop:"1px dashed var(--mist)",display:"flex",justifyContent:"space-between",gap:10,flexWrap:"wrap"}}>
                <span style={{fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace"}}><span style={{color:"var(--slate-400)"}}>OWNER · </span>{x.owner}</span>
                <span style={{padding:"2px 8px",borderRadius:99,background:x.c,color:"#fff",fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,fontWeight:700,letterSpacing:"0.06em",textTransform:"uppercase"}}>{x.buyer}</span>
              </div>
            </div>
          ))}
        </div>
        <div className="buyer-strip">
          {buyers.map((x,i) => (
            <div key={i} style={{padding:"16px 18px",borderLeft:`4px solid ${x.c}`,background:"#fff",borderRadius:10,border:"1px solid var(--mist)",borderLeftWidth:4,borderLeftColor:x.c}}>
              <div style={{fontSize:14,fontWeight:700,color:"var(--shark)",marginBottom:4}}>{x.b}</div>
              <div style={{fontSize:12.5,color:"var(--slate-500)",lineHeight:1.5}}>{x.d}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:16,padding:"16px 22px",background:"var(--shark)",borderRadius:12,color:"#fff",fontSize:14.5,lineHeight:1.6}}>
          <strong>The implication.</strong> One message to &ldquo;security&rdquo; undersells the product. Four buyers means four tracks, and a pilot that tells you which one answers first.
        </div>
      </div>
    </section>
  );
}

// ─── 03 · Where the buyer base is ─────────────
function BuyerBase() {
  const sources = [
    { n:"01", t:"The installed base", c:"#0E9F66",
      d:"SecureAuth reports 500+ enterprise clients. Those already trusting the platform for workforce or customer identity are deploying agents too. Adding agents is an expansion conversation, not a new logo.",
      how:"Export of in-scope accounts, worked as a retargeting track" },
    { n:"02", t:"Stack-defined lists", c:"#21A8F2",
      d:"The integration list is the targeting filter. Enterprises running Okta, Microsoft Entra or Ping as their identity provider and rolling out Copilot, Gemini Enterprise, Claude or ChatGPT are exactly the environments Agent Authority is built to sit inside.",
      how:"Technographic and job-post data, scored for fit before any send" },
    { n:"03", t:"Event rosters", c:"#FF8559",
      d:"Identity and security buyers gather at a handful of shows a year, and the rosters are public: speakers, sponsors and registered attendees.",
      how:"Gartner IAM Summit, Dec 7-9, 2026 · RSAC, Apr 5-8, 2027 · Identiverse, Jun 28 to Jul 1, 2027" },
    { n:"04", t:"Live signals", c:"#9D4EDD",
      d:"Companies announcing an enterprise AI rollout, hiring for AI governance or AI security, adopting MCP servers, or naming a new CISO or head of IAM. Each is a dated reason to write this month, not next quarter.",
      how:"Refreshed daily, each contact tagged with the signal that fired" },
  ];
  return (
    <section className="section" id="universe">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>03 / Where the buyers are</span>
          <h2>Four places to find them, in the order we would work them.</h2>
          <p>Warmest first. The installed base and the event rosters carry their own reason to reply; the stack lists and live signals make the cold outreach relevant.</p>
        </div>
        <div className="src-grid">
          {sources.map((x,i) => (
            <div key={i} className="card" style={{padding:"22px 24px",display:"flex",flexDirection:"column",gap:10}}>
              <div style={{display:"flex",alignItems:"baseline",gap:12}}>
                <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:13,fontWeight:800,color:x.c}}>{x.n}</span>
                <span style={{fontSize:17,fontWeight:600,color:"var(--shark)"}}>{x.t}</span>
              </div>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.6,margin:0}}>{x.d}</p>
              <div style={{marginTop:"auto",paddingTop:10,borderTop:"1px dashed var(--mist)",fontSize:11.5,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",lineHeight:1.5}}>
                <span style={{color:"var(--slate-400)"}}>HOW · </span>{x.how}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 04 · What has worked, what has not ─────────────
function WhatWorks() {
  const worked = [
    { k:"Conference and event campaigns", v:"6.5×", s:"more efficient than evergreen · 53% average positive-reply rate",
      so:"Gartner IAM, RSAC and Identiverse are the strongest plays on this page." },
    { k:"Retargeting and reactivation", v:"1.5-2×", s:"evergreen efficiency · 33% to 74% positive-reply rate",
      so:"The installed base and past opportunities are the warmest list SecureAuth owns." },
    { k:"Senior senders", v:"2-10×", s:"positive-reply rate on identical copy when a founder, CEO or named partner sends",
      so:"Run the narrative from an executive’s LinkedIn profile, not a generic rep." },
    { k:"Signal-based timing", v:"1-3×", s:"evergreen efficiency · 26% to 45% positive-reply rate",
      so:"A new CISO or an AI rollout announcement is the reason to write this week." },
    { k:"LinkedIn alongside email", v:"~2×", s:"LinkedIn positive-reply rates typically run about twice email",
      so:"Both channels from day one, so the read covers both." },
  ];
  const didnt = [
    { k:"Offer-led campaigns", v:"5-15%", s:"positive-reply rate · ranked last of six campaign types",
      so:"Do not lead with the free trial. It invites tire-kickers. Lead with the problem." },
    { k:"Broad evergreen outreach", v:"Baseline", s:"none of AICRO’s five best campaigns were evergreen",
      so:"Generic “agent security” messaging to every IT leader is the floor, not the plan." },
    { k:"Adjacent roles", v:"0 of 964", s:"positive replies when one campaign targeted a support function instead of the owner",
      so:"Target the owner of each capability, not whoever sits near security." },
    { k:"Replies without intent", v:"142 → 0", s:"142 replies on one high-volume campaign, zero of them with intent",
      so:"Judge tracks on positive and qualified replies, never on reply volume." },
    { k:"Unvalidated lists", v:">15%", s:"bounce rate is the point where a campaign reliably fails",
      so:"New security lists are validated before a single send." },
  ];
  const Row = ({ x, c }) => (
    <div style={{padding:"16px 0",borderBottom:"1px solid var(--mist)",display:"grid",gridTemplateColumns:"92px 1fr",gap:14}}>
      <div style={{fontSize:22,fontWeight:700,color:c,letterSpacing:"-0.02em",lineHeight:1.1}}>{x.v}</div>
      <div>
        <div style={{fontSize:14,fontWeight:600,color:"var(--shark)"}}>{x.k}</div>
        <div style={{fontSize:12,color:"var(--slate-500)",marginTop:2,lineHeight:1.45}}>{x.s}</div>
        <div style={{fontSize:12.5,color:"var(--slate-700)",marginTop:6,lineHeight:1.5}}><span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,color:c,fontWeight:700,letterSpacing:"0.06em"}}>FOR AGENT AUTHORITY · </span>{x.so}</div>
      </div>
    </div>
  );
  return (
    <section className="section section-soft" id="works">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>04 / What has worked, and what has not</span>
          <h2>Lean on what the data already says.</h2>
          <p>From AICRO&rsquo;s own campaign history: 443+ campaigns across our clients, March 2025 to March 2026, plus our benchmark set of 500+ campaigns. Different industries, same physics. Each line ends with what it means for Agent Authority.</p>
        </div>
        <div className="works-grid">
          <div className="card" style={{padding:"22px 26px"}}>
            <div className="commit-label" style={{color:"#0E9F66",marginBottom:4}}>What has worked</div>
            {worked.map((x,i) => <Row key={i} x={x} c="#0E9F66"/>)}
          </div>
          <div className="card" style={{padding:"22px 26px"}}>
            <div className="commit-label" style={{color:"#FF5A4E",marginBottom:4}}>What has not</div>
            {didnt.map((x,i) => <Row key={i} x={x} c="#E0533F"/>)}
          </div>
        </div>
        <div className="calc-foot">Rates are portfolio ranges from AICRO&rsquo;s campaign-type analysis and benchmark set, not predictions for SecureAuth. Client campaigns are anonymized.</div>
      </div>
    </section>
  );
}

// ─── 05 · Campaigns ─────────────
function Campaigns() {
  const top = [
    { c:"Event · confirmed attendees", cl:"Capitalize", p:"95%", n:"38", e:"1 : 42" },
    { c:"Event · ICSC", cl:"Gumption", p:"81%", n:"26", e:"1 : 88" },
    { c:"Retarget · year-end acceleration", cl:"Capitalize", p:"74%", n:"56", e:"1 : 77" },
    { c:"Event · CREFC San Diego 2026", cl:"Capitalize", p:"74%", n:"32", e:"1 : 87" },
    { c:"Event · CREFC Miami retarget", cl:"Capitalize", p:"74%", n:"14", e:"1 : 254" },
  ];
  const slate = [
    { name:"EM + LI | Event | Gartner IAM Summit US", type:"Conference · ranked #1", c:"#FF8559",
      who:"Speakers, sponsors and registered attendees, Dec 7-9 in Las Vegas", when:"Pre-show from mid-November, post-show within 48 hours",
      line:"“You’ll be at Gartner IAM. Worth 15 minutes on how you’re governing agents, there or before you fly?”" },
    { name:"EM | Retarget | Installed base: agents on identities you already secure", type:"Retargeting · ranked #2", c:"#0E9F66",
      who:"Current workforce and customer identity customers in scope", when:"Pilot week one",
      line:"“Your agents already act with identities SecureAuth protects. The next question is what each one may do.”" },
    { name:"LI | Executive narrative | Who walked in the door", type:"Narrative from a senior sender · ranked #3", c:"#9D4EDD",
      who:"Security and identity leaders, sent from an executive’s own profile", when:"Pilot day 5 onward",
      line:"“Authentication tells you who walked in the door. It tells you nothing about whether the next transaction should happen.”" },
    { name:"LI + EM | Signal | AI rollout or new security leader", type:"Signal-based · ranked #4", c:"#21A8F2",
      who:"AI platform owners and new CISOs at Okta, Entra and Ping shops", when:"Pilot day 5 onward, refreshed daily",
      line:"“Your security team will ask how every agent is authorized. This is the answer that lets you ship.”" },
  ];
  return (
    <section className="section" id="campaigns">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>05 / Campaigns that have worked</span>
          <h2>Our five best campaigns, and the four we would run for Agent Authority.</h2>
          <p>Every one of AICRO&rsquo;s five best-performing campaigns, by positive-reply rate with at least five positives, was an event or a retargeting play. The Agent Authority slate is built on the same campaign types, in the same order.</p>
        </div>
        <div className="card" style={{padding:0,overflow:"hidden"}}>
          <div style={{overflowX:"auto"}}>
            <table className="top-table">
              <thead><tr><th>Campaign</th><th>Client</th><th>Positive-reply rate</th><th>Positives</th><th>Emails per positive</th></tr></thead>
              <tbody>{top.map((r,i) => (<tr key={i}><td>{r.c}</td><td>{r.cl}</td><td><strong>{r.p}</strong></td><td>{r.n}</td><td>{r.e}</td></tr>))}</tbody>
            </table>
          </div>
        </div>
        <div className="plan-kicker" style={{color:"var(--shark)",marginTop:30}}>The Agent Authority slate</div>
        <div className="qa-grid">
          {slate.map((s,i) => (
            <div key={i} className="card" style={{padding:"22px 24px",display:"flex",flexDirection:"column",gap:10,borderTop:`4px solid ${s.c}`}}>
              <span style={{alignSelf:"flex-start",padding:"3px 10px",borderRadius:99,background:s.c,color:"#fff",fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,fontWeight:800,letterSpacing:"0.08em",textTransform:"uppercase"}}>{s.type}</span>
              <div style={{fontSize:15,fontWeight:600,color:"var(--shark)",fontFamily:"'JetBrains Mono',monospace",lineHeight:1.4}}>{s.name}</div>
              <div style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5}}><span style={{color:"var(--slate-400)",fontFamily:"'JetBrains Mono',monospace",fontSize:10.5}}>WHO · </span>{s.who}</div>
              <div style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5}}><span style={{color:"var(--slate-400)",fontFamily:"'JetBrains Mono',monospace",fontSize:10.5}}>WHEN · </span>{s.when}</div>
              <div style={{marginTop:"auto",fontSize:13.5,color:"var(--shark)",fontStyle:"italic",lineHeight:1.5,paddingTop:8,borderTop:"1px dashed var(--mist)"}}>{s.line}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:16,padding:"16px 22px",background:"#fff",border:"1px solid var(--mist)",borderLeft:"4px solid #E0533F",borderRadius:12,fontSize:13.5,color:"var(--slate-700)",lineHeight:1.6}}>
          <strong style={{color:"var(--shark)"}}>What we would not run.</strong> An offer-led blast built around the free trial. Offer-led campaigns rank last of the six types in our data. The trial is a good close, not a good opener.
        </div>
      </div>
    </section>
  );
}

// ─── 06 · Phased plan ─────────────
function PhasedPlan() {
  const phases = [
    { tier:"P1", label:"The pilot", window:"Weeks 1 to 2", color:"#21A8F2", tint:"#E9F5FE",
      call:"Prove which buyer answers. Three tracks live, the Gartner IAM list built in parallel.",
      points:["Installed-base retarget","Executive narrative on LinkedIn","Signal track: AI rollouts and new security leaders","Gartner IAM roster built and validated","Day 14 read, track by track"] },
    { tier:"P2", label:"The first event window", window:"Weeks 3 to 10", color:"#FF8559", tint:"#FFEEE5",
      call:"Point the winning track at Gartner IAM, Dec 7-9, and scale it on SecureAuth-branded sending domains.",
      points:["Pre-show outreach from mid-November","Post-show follow-up within 48 hours","Scale the strongest pilot track","Retarget everyone who engaged in the pilot","Start the RSAC roster"] },
    { tier:"P3", label:"The program", window:"Q1 2027 onward", color:"#0E9F66", tint:"#E5F9F0",
      call:"Run it as a standing engine around the two biggest shows of the year.",
      points:["RSAC, Apr 5-8, pre-show from February","Identiverse, Jun 28 to Jul 1","Lookalikes of whatever progressed","Add the risk and compliance track (Agent Trail)","Monthly review of every track"] },
  ];
  const unknowns = [
    "How many installed-base customers are already deploying agents, and on which platforms?",
    "Which of the four buyers has signed first so far, if any?",
    "Who takes first meetings today, and how many can they hold a week?",
    "Which claims can we use in market today, and which are still under review?",
  ];
  return (
    <section className="section section-soft" id="plan">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>06 / The phased plan</span>
          <h2>Three phases, timed to the shows your buyers attend.</h2>
          <p>Phase 1 is the pilot. Phase 2 is the first event window, nine weeks out. Phase 3 only happens if the first two earn it.</p>
        </div>
        <div className="work-grid">
          {phases.map((t,i) => (
            <div key={i} className="card" style={{padding:0,overflow:"hidden",display:"flex",flexDirection:"column",borderTop:`4px solid ${t.color}`}}>
              <div style={{padding:"18px 20px 14px",background:t.tint}}>
                <div style={{display:"flex",alignItems:"baseline",gap:10,marginBottom:6}}>
                  <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,fontWeight:800,color:t.color}}>{t.tier}</span>
                  <span style={{fontSize:16,fontWeight:600,color:"var(--shark)"}}>{t.label}</span>
                </div>
                <div style={{fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace"}}>{t.window}</div>
              </div>
              <div style={{padding:"14px 20px",borderBottom:"1px solid var(--mist)"}}>
                <p style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.55,margin:0}}>{t.call}</p>
              </div>
              <ul style={{listStyle:"none",padding:"14px 20px 18px",margin:0,display:"flex",flexDirection:"column",gap:7}}>
                {t.points.map((f,j) => (<li key={j} style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.45,display:"flex",gap:8}}><span style={{color:t.color,fontWeight:700}}>&middot;</span>{f}</li>))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{marginTop:16,padding:"20px 26px",background:"#fff",border:"1px solid var(--mist)",borderLeft:"4px solid #9D4EDD",borderRadius:12}}>
          <div style={{fontSize:14,fontWeight:700,color:"var(--shark)",marginBottom:8}}>What we cannot answer from the outside</div>
          <ul className="plan-list">{unknowns.map((u,i) => <li key={i}>{u}</li>)}</ul>
        </div>
      </div>
    </section>
  );
}

// ─── The product (example-data screens) ─────────────────
function ProductScreens() {
  const shots = [
    { src:"uploads/home-brief-top.png", label:"Daily brief", caption:"The morning view: what replied, what is waiting on you, and the handoff from qualified lead to meeting to pipeline." },
    { src:"uploads/inbox-draft-times.png", label:"Reply drafted, times checked", caption:"Remi, the reply agent, drafts in the rep’s voice with real open times from their calendar. The rep reviews, edits and presses Send. Remi never sends on its own." },
    { src:"uploads/leads-board.png", label:"Leads board", caption:"Every reply, stage and forecast in one place, with the value AICRO sourced called out separately." },
    { src:"uploads/metrics-campaigns.png", label:"Campaign results", caption:"Every campaign ranked by positive replies and meetings, so the next dollar goes to what is working." },
  ];
  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)"}}>07 / The product</span>
          <h2>The platform your team would work from.</h2>
          <p style={{color:"rgba(255,255,255,.6)"}}>Four screens from the live AICRO product. Every name, company and figure shown is example data for a fictional customer.</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>
                <span style={{marginLeft:"auto",fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,color:"#94A3B8",letterSpacing:"0.08em",textTransform:"uppercase"}}>Example data</span>
              </div>
              <img src={s.src} alt={s.label} loading="lazy" 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>
  );
}

// ─── Client logos ─────────────────────────────────────
const ClientLogos = {
  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>
  ),
  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>
  ),
  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>
  ),
  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>
  ),
  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.RemoteLock color={color}/>
          <ClientLogos.Lucra color={color}/>
          <ClientLogos.Capitalize color={color}/>
          <ClientLogos.HenryAI color={color}/>
          <ClientLogos.Gumption color={color}/>
          <ClientLogos.WorthClark color={color}/>
        </div>
      </div>
    </section>
  );
}

// ─── Section 1: Why now ────────────────────────
function MarketThesis() {
  const drivers = [
    {
      tag: "01 · THE SURFACE IS ARRIVING",
      stat: "40%",
      statLbl: "of enterprise apps with task-specific AI agents by end of 2026",
      title: "Agents are moving from pilots into the applications your buyers already run.",
      body: "Gartner expects task-specific agents in up to 40% of enterprise applications by the end of 2026, up from under 5% in 2025. Every one of those agents acts with someone’s access. The security team that owns identity is about to own a population it cannot see yet.",
      source: "Source: Gartner press release, Aug 26, 2025",
    },
    {
      tag: "02 · THE RISK IS ACCESS",
      stat: "97%",
      statLbl: "of AI-breached organizations lacked AI access controls",
      title: "When AI goes wrong, it goes wrong through access.",
      body: "IBM found 13% of organizations reported breaches of AI models or applications, and 97% of those had no AI access controls in place. One in five reported a breach tied to shadow AI. That is SecureAuth’s problem statement in someone else’s data, which is what makes it land with a CISO.",
      source: "Source: IBM Cost of a Data Breach 2025, newsroom release Jul 30, 2025",
    },
    {
      tag: "03 · GOVERNANCE UNLOCKS ADOPTION",
      stat: "40%+",
      statLbl: "of agentic AI projects canceled by end of 2027",
      title: "Projects stall on risk controls. That makes security the enabler, not the brake.",
      body: "Gartner predicts over 40% of agentic AI projects will be canceled by the end of 2027, with inadequate risk controls named among the causes. Agent Authority’s own line, “securely adopt AI agents faster,” speaks to the person who owns the rollout as much as the person who owns the risk.",
      source: "Source: Gartner press release, Jun 25, 2025",
    },
    {
      tag: "04 · THE SHORTLIST FORMS NOW",
      stat: "May 2026",
      statLbl: "Agent Authority launch · the category is still being named",
      title: "Buyers are deciding what “agent identity” means this year.",
      body: "Many vendors entering the space, in SecureAuth’s own words, ship an MCP gateway and stop at agent-to-tool mapping. Buyers who have not yet formed a view will adopt the frame of whoever reaches them first. Outbound is how SecureAuth gets to set that frame before the bundled platforms do.",
      source: "Source: SecureAuth launch release, GlobeNewswire, May 19, 2026",
    },
  ];
  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 shipped. The next constraint is reach.</h2>
          <p>Four forces make the next two quarters the window to put Agent Authority in front of the people who will decide how their company governs agents.</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>
  );
}

// ─── The 14-day pilot ─────────────
const TRIAL_STEPS = [
  { day:"Day 0", title:"Kickoff call", color:"#21A8F2",
    body:"30 minutes with Doug. Connect the LinkedIn seats you choose (each person signs in themselves, we never hold credentials) and open a shared Slack channel. No CRM integration: account lists and a do-not-contact file are enough to start.",
    out:"Systems connected" },
  { day:"Days 1 to 3", title:"The playbook, built for you", color:"#21A8F2",
    body:"We draft the Agent Authority playbook from the product page, your approved claims and your best accounts: the four buyer tracks, titles, proof points and objections. Your team corrects it and signs off the claims.",
    out:"Approved playbook + target lists" },
  { day:"Days 3 to 5", title:"Messaging, approved by you", color:"#9D4EDD",
    body:"Email and LinkedIn sequences for the three pilot campaigns, drafted for your sign-off. Nothing sends without approval from your team.",
    out:"Approved sequences" },
  { day:"Target · Day 5", title:"Live on LinkedIn and email", color:"#9D4EDD",
    body:"LinkedIn from the profiles your team connects. Email from AICRO’s already-warm infrastructure, never secureauth.com. SecureAuth-branded sending domains can start warming in parallel if you continue.",
    out:"Campaigns live" },
  { day:"Day 5 to 14", title:"Replies, handled with you", color:"#0E9F66",
    body:"Every reply lands in the AICRO inbox and in Slack with a drafted response. Your team approves, the meeting gets booked on the right calendar, and a weekly export of every reply and meeting goes to you for your own CRM.",
    out:"Every reply handled with you, meetings booked as they come" },
  { day:"Day 14", title:"Pilot review", color:"#FF8559",
    body:"We walk the full funnel together, track by track: contacted, interested, qualified, booked. Which buyer replied, to which message, and what we would do next.",
    out:"A clear read on each track" },
];

const TRIAL_PREP = [
  { id:"lists", label:"A list export of installed-base accounts in scope (a spreadsheet is fine)" },
  { id:"seats", label:"LinkedIn profiles willing to connect (executives, sales leaders, AEs)" },
  { id:"claims", label:"Approved Agent Authority claims and the proof points we may use" },
  { id:"exclude", label:"Accounts to leave alone: active deals, partners, anything an AE owns" },
  { id:"dnc", label:"Do-not-contact list as a file, refreshed weekly during the pilot" },
  { id:"calendar", label:"Booking links for the AEs who take first meetings" },
  { id:"review", label:"One person from product marketing or legal for message review" },
];

function TrialPrepChecklist() {
  const KEY = "aicro-secureauth-pilot-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 SecureAuth</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. A few hours of your team&rsquo;s time in total, most of it on the kickoff call and message review.
      </div>
    </div>
  );
}

function Trial() {
  return (
    <section className="section" id="trial">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>09 / The 2-week pilot</span>
          <h2>Fourteen days, live, on your market. Here is exactly what happens.</h2>
          <p>The pilot is the real engine on real Agent Authority 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 track 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 a demo or pricing, or named a need</li>
              <li><strong>Booked</strong> · meetings on your AEs&rsquo; calendars, and who took them</li>
              <li><strong>Learned</strong> · which of the four buyers responds, to which campaign, 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"}}>After Day 14.</strong> If the read is good, the winning track goes straight into the Gartner IAM window. CRM integration can come then, if you want it. If it is not, you keep the plan and the pilot read, and you know more about your buyer than you did two weeks ago.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Proof ─────────────────
function CaseStudies() {
  const cases = [
    {
      co: "RemoteLock",
      stage: "SaaS · LinkedIn-led",
      sector: "Smart access SaaS",
      quote: "Operator-to-operator LinkedIn messaging that gets named enterprise accounts replying. Access control is the closest category in our book to identity security.",
      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: "Lucra",
      stage: "B2B SaaS",
      sector: "Sports technology platform",
      quote: "A B2B software company with a lean sales team. 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: "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">08 / Proof</span>
          <h2>Real clients, real numbers. Ask to speak with any of them.</h2>
          <p>RemoteLock sells access control into enterprises, the nearest thing in our book to identity security. Lucra is B2B software with a lean team working 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>
  );
}


// ─── What two weeks can tell you ─────────────────
function PilotRead() {
  return (
    <section className="section section-soft" id="economics">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">10 / What two weeks can tell you</span>
          <h2>Honest about what a two-week pilot measures.</h2>
          <p>Enterprise security deals take months. A two-week pilot will not show you closed revenue, and we will not pretend it does. It can show you which buyer answers, what makes them answer, and whether the first meetings are with the right people.</p>
        </div>
        <div className="read-grid">
          <div className="card commit-card">
            <div className="commit-label" style={{color:"#0E9F66"}}>What 14 days can show</div>
            <ul>
              <li>Reply and positive-reply rates for each campaign: installed base, executive narrative, signal track</li>
              <li>Which titles and which messages earn a response</li>
              <li>The objections buyers raise in their own words</li>
              <li>First meetings, where buyers are ready to take them</li>
              <li>Whether outbound can reach this buyer at all, which is the question underneath the others</li>
            </ul>
          </div>
          <div className="card commit-card">
            <div className="commit-label" style={{color:"var(--slate-500)"}}>What it cannot show yet</div>
            <ul>
              <li>Pipeline value or closed revenue</li>
              <li>Full sales-cycle conversion</li>
              <li>Results at program volume</li>
            </ul>
            <p>Those need a longer run. The pilot tells you whether one is worth running, and on which track.</p>
          </div>
          <div className="card commit-card">
            <div className="commit-label" style={{color:"#21A8F2"}}>What we commit to</div>
            <ul>
              <li>A playbook and target lists your team signs off</li>
              <li>Campaigns targeted to go live by Day 5, once LinkedIn is connected and the lists are in</li>
              <li>Every message and every reply approved by SecureAuth before it sends</li>
              <li>A Day 14 review of every stage, by campaign, plus a weekly export for your CRM</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Position ─────────────────────────────────────
function Matrix() {
  const cols = ["Outsourced SDR agency", "More in-house SDRs", "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 pilot" },
    { 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">11 / Position</span>
          <h2>Not an agency. Not a tool. A fractional revenue team.</h2>
          <p>Strategy, delivery and software in one engagement, next to your team, with or without your CRM connected.</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)"}}>12 / Scope the pilot</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>30 minutes to scope the pilot.</h2>
            <p>We will walk this plan, correct anything the outside view got wrong, and agree on the three pilot campaigns, the claims we may use and the pilot terms. If it fits, the kickoff can follow the same week.</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 30 minutes with Doug →
              </a>
              <a href="#trial" style={{fontSize:14,color:"rgba(255,255,255,0.8)",textDecoration:"underline"}}>Review the pilot plan</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">SECUREAUTH · AGENT AUTHORITY GTM BRIEF · 2026-10-06</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/>
      <BuyerMap/>
      <BuyerBase/>
      <WhatWorks/>
      <Campaigns/>
      <PhasedPlan/>
      <ProductScreens/>
      <CaseStudies/>
      <Trial/>
      <PilotRead/>
      <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/>);
