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

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

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

// ─── Nav ─────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="nav-left">
          <a href="#" className="nav-logo">
            <span className="nav-logo-text">AICRO</span>
            <span className="nav-tag">Playkout Proposal</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">Why now</a>
            <a href="#orchestration">Orchestration</a>
            <a href="#impact">Impact</a>
            <a href="#icp-map">ICP map</a>
            <a href="#cases">Proof</a>
            <a href="#economics">Economics</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#cta" className="btn btn-ghost btn-sm">15-min walkthrough</a>
          <a href="#cta" className="btn btn-primary btn-sm">Sign and start</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 Jorge Guerrero · Playkout · June 11, 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          Jorge, you proved the concept in Dallas.<br/>
          The room fills, the simulators run, the play is real.<br/>
          <span style={{color:"#21A8F2"}}>The next constraint is how many operators open the second one.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:920}}>
          Custom pickleball stations, simulators tracking every ball, competitive-social play that turns a workout into a game. Dallas proves the model: people show up, compete, come back. The ceiling now is reach, how many multi-unit operators, franchise developers, and club GMs ever decide to open the next one. AICRO runs cold, operator-to-operator outbound that fills your expansion pipeline with net-new operators. We already run this motion for Lucra Sports, selling into the same category of venues. You sign them. We manufacture the at-bats.
        </p>
        <div className="hero-cta-row">
          <a href="#thesis" className="btn btn-primary btn-lg">See the thesis →</a>
          <a href="#system" className={dark ? "btn btn-outline-light btn-lg" : "btn btn-ghost btn-lg"}>How we operate</a>
        </div>
        <div style={{marginTop:36,paddingTop:24,borderTop:"1px solid rgba(255,255,255,0.10)",display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:24,maxWidth:920}}>
          {[
            {v:"19.8M", l:"US pickleball players · 2024 · +46% YoY"},
            {v:"Fastest-growing", l:"US sport · 4 straight years · SFIA"},
            {v:"27%", l:"of Lucra’s booked meetings · our sports-venue book"},
            {v:"$7.9B", l:"projected pickleball market · 2033"},
          ].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 = {
  Crexi: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 80 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="18" fontWeight="700" letterSpacing="-0.02em" fill={color}>CREXi</text></svg>
  ),
  Pacaso: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 100 22" height="20"><text x="0" y="17" fontFamily="Georgia,serif" fontSize="20" fontWeight="400" fontStyle="italic" letterSpacing="-0.01em" fill={color}>Pacaso</text></svg>
  ),
  Capitalize: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 130 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="17" fontWeight="800" letterSpacing="-0.02em" fill={color}>Capitalize</text></svg>
  ),
  JohnsonCap: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 150 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="15" fontWeight="600" letterSpacing="0.01em" fill={color}>Johnson Capital</text></svg>
  ),
  WorthClark: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 130 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="15" fontWeight="600" letterSpacing="0.02em" fill={color}>Worth Clark</text></svg>
  ),
  Gumption: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 110 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="17" fontWeight="700" fontStyle="italic" letterSpacing="-0.02em" fill={color}>gumption</text></svg>
  ),
  Hemlane: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 90 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="17" fontWeight="600" letterSpacing="-0.01em" fill={color}>Hemlane</text></svg>
  ),
  Lucra: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 70 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="18" fontWeight="800" letterSpacing="-0.02em" fill={color}>Lucra</text></svg>
  ),
};

function TrustStrip() {
  const color = "#1C1C24";
  return (
    <section className="trust-strip">
      <div className="wrap trust-inner">
        <span className="trust-label">Operating partners across sports, experiential + real estate</span>
        <div className="trust-logos">
          <ClientLogos.Lucra color={color}/>
          <ClientLogos.Capitalize color={color}/>
          <ClientLogos.Gumption color={color}/>
          <ClientLogos.JohnsonCap color={color}/>
          <ClientLogos.WorthClark color={color}/>
          <ClientLogos.Crexi color={color}/>
          <ClientLogos.Pacaso color={color}/>
        </div>
      </div>
    </section>
  );
}

// ─── Section 1: Market Thesis · Why Now ────────────────────────
function MarketThesis() {
  const drivers = [
    {
      tag: "01 · THE LAND-GRAB IS REAL",
      stat: "19.8M",
      statLbl: "US pickleball players · 2024 · +46% YoY",
      title: "Pickleball is the fastest-growing US sport four years running.",
      body: "19.8 million Americans played pickleball in 2024, up 45.8% over 2023 and 311% across three years. The SFIA has called it the fastest-growing US sport four consecutive years. The 25 to 34 cohort is the single most-represented age group. Market value is projected to run from $1.9B in 2023 to $7.9B by 2033, roughly 15.3% CAGR. A concept that turns that demand into a gamified, competitive-social venue does not have a demand problem. It has a footprint problem, and footprint is won operator by operator.",
      source: "Source: SFIA 2024 · pickleball participation",
    },
    {
      tag: "02 · THE FACILITY SHORTAGE",
      stat: "~70K",
      statLbl: "US places to play · +55% YoY",
      title: "Players are multiplying faster than places to play.",
      body: "There are roughly 70,000 places to play pickleball in the US, up 55% year over year, and the gap is still widening against an estimated $855M of court-construction investment needed over the next five to seven years. 13.6 million casual and 6.2 million core players are competing for court time that does not exist yet. Every multi-unit fitness operator, franchise developer, and club GM is now weighing how to add racquet capacity. That is the exact conversation a Playkout expansion engine should be starting, before the competitor across town does.",
      source: "Source: SFIA 2024 · facility growth + build-out need",
    },
    {
      tag: "03 · THE BUYER IS REACHABLE",
      stat: "40%",
      statLbl: "LinkedIn PRR · Lucra Competitive Social",
      title: "Operators in this category answer when a peer reaches out.",
      body: "Multi-unit operators, franchise developers, and club GMs sit lean and answer email and LinkedIn directly when a peer, not a vendor, reaches out. AICRO runs this exact buyer today. For Lucra Sports, a competitive-social platform selling into sports and entertainment venues, the LinkedIn Competitive Social play hit 40% positive-reply rate, the golf and PGA audience hit 45.45% PRR with 11 meetings, and the account drove 27% of all booked meetings on our sports-venue book. Same category of buyer, same room, same reply pattern Playkout needs.",
      source: "Source: AICRO · Lucra Sports active engagement",
    },
    {
      tag: "04 · EXPANSION DESERVES A MOTION",
      stat: "Repeatable",
      statLbl: "expansion engine · not a founder's calendar",
      title: "The second, fifth, and tenth location need a repeatable motion.",
      body: "Right now your expansion is founder-led: Jorge and Bahigh working relationships, inbound interest, and word of mouth off the Dallas opening. That gets the first few locations. It does not fill a multi-unit and franchise pipeline at the pace the market window allows. Install a net-new engine now and the next twelve months show a graded operator universe, a live signal layer, and a booked-conversation cadence you can hand to a head of franchise development when you make that hire. The thing that compounds expansion is not one great Dallas story, it is a working machine that puts a qualified operator in front of you every week.",
      source: "Source: Playkout positioning · founder-led expansion today",
    },
  ];
  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 concept is proven. The growth ceiling is footprint.</h2>
          <p>A full room in Dallas is the strongest signal a venue concept can give. The value Playkout creates is now capped by one thing. How many multi-unit operators, franchise developers, real-estate entertainment groups, and club and resort GMs ever sit down and decide to open one. Four forces make closing that gap the highest-leverage move Playkout can make this year.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          {drivers.map((d,i) => (
            <div key={i} className="card" style={{padding:28,display:"flex",flexDirection:"column",gap:14}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:600}}>{d.tag}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:14,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:42,fontWeight:600,letterSpacing:"-0.02em",color:"var(--shark)",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <h3 style={{fontSize:20,lineHeight:1.3,color:"var(--shark)",margin:0}}>{d.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>{d.body}</p>
            </div>
          ))}
        </div>
        <div style={{marginTop:32,padding:"24px 28px",background:"var(--shark)",borderRadius:14,color:"#fff"}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600,marginBottom:12}}>The obvious question, answered first</div>
          <div style={{fontSize:18,lineHeight:1.5,color:"#fff",fontWeight:500,maxWidth:940}}>
            &ldquo;Playkout already fills its own room. Why pitch us outbound?&rdquo; Because Dallas fills once a player walks in, and that is your turf. AICRO works one layer up, into the multi-unit operators, franchise developers, and club GMs who decide where the next Playkout gets built. We never touch your in-venue experience or consumer marketing. We fill the expansion pipeline. You sign the operators. We manufacture the at-bats.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 2: AICRO Orchestration Layer ────────────────────────
// Redesigned as a workflow visual that shows the actual mechanics —
// inputs flow down, branch at send, converge at reply, exit as a booked demo.
function Orchestration() {
  const inputs = [
    { lbl:"Your ICP map", sub:"4 operator-type pools · US" },
    { lbl:"Public web", sub:"LinkedIn, franchise registries, location rosters, news" },
    { lbl:"Stack + intent", sub:"Amenity gaps, racquet-build RFPs, expansion posts" },
    { lbl:"Event rosters", sub:"IHRSA, ICSC, IFA Franchise Expo, racquet industry events" },
  ];
  const signals = [
    { lbl:"New location / club opening", color:"#21A8F2" },
    { lbl:"Franchise-development hire", color:"#21A8F2" },
    { lbl:"Fitness / experiential M&A", color:"#9D4EDD" },
    { lbl:"Real-estate entertainment fund activity", color:"#9D4EDD" },
    { lbl:"Racquet-amenity RFP posted", color:"#0E9F66" },
    { lbl:"Multi-unit operator · footprint expansion", color:"#FF8559" },
  ];
  const channels = [
    {
      tag:"EMAIL · AICRO SEND",
      head:"75+ warmed inboxes",
      sub:"98.4% deliverability · auto-failover routing",
      bar:"#0E9F66",
    },
    {
      tag:"LINKEDIN · AICRO CONNECT",
      head:"Multi-seat orchestrator",
      sub:"6-8 SDR profiles · title-tier sequencing",
      bar:"#7E73E8",
    },
  ];
  const Pipe = ({ height = 36, dotted = false }) => (
    <div style={{display:"flex",justifyContent:"center"}}>
      <div style={{
        width:2, height,
        background: dotted
          ? "repeating-linear-gradient(180deg, #21A8F2 0 6px, transparent 6px 12px)"
          : "linear-gradient(180deg, #21A8F2, rgba(33,168,242,0.25))",
      }}/>
    </div>
  );
  const StepBadge = ({ n, label }) => (
    <div style={{display:"inline-flex",alignItems:"center",gap:10,padding:"6px 14px",background:"#fff",border:"1px solid var(--mist)",borderRadius:99,fontFamily:"'JetBrains Mono',monospace",fontSize:10.5,letterSpacing:"0.10em",color:"var(--slate-700)",fontWeight:700,textTransform:"uppercase"}}>
      <span style={{width:22,height:22,borderRadius:"50%",background:"#21A8F2",color:"#fff",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:800}}>{n}</span>
      {label}
    </div>
  );
  return (
    <section className="section section-soft" id="orchestration">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">02 / The AICRO orchestration layer</span>
          <h2>How a row in your universe becomes a booked demo.</h2>
          <p>Not a tool, an SDR, or a list. A working pipeline that runs every day. Below is exactly what happens between a multi-unit operator or franchise developer on LinkedIn and an expansion conversation on Jorge&rsquo;s or the franchise-dev lead&rsquo;s calendar, step by step, with the systems doing the work named.</p>
        </div>

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

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

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

          {/* Step 3: Per-row composer */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="3" label="Per-row composer · LLM + your voice library"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>every line traceable to the signal that triggered it</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:0,border:"1px solid var(--mist)",borderRadius:12,overflow:"hidden",marginBottom:8}}>
            <div style={{padding:"16px 18px",background:"#fff",borderRight:"1px solid var(--mist)"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"var(--slate-500)",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>INPUT</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>One operator row: role, company, unit count, tenure, recent activity, top signal fired</div>
            </div>
            <div style={{padding:"16px 18px",background:"#F6F8FB",borderRight:"1px solid var(--mist)",position:"relative"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"#21A8F2",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>COMPOSE</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>Picks signal · picks proof · writes relevance hook · matches Playkout voice</div>
              <div style={{position:"absolute",right:-9,top:"50%",transform:"translateY(-50%)",width:18,height:18,background:"#21A8F2",color:"#fff",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:800,zIndex:2}}>→</div>
            </div>
            <div style={{padding:"16px 18px",background:"#fff"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"var(--slate-500)",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>OUTPUT</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>Subject · Email 1 · Email 2 · Email 3 · LinkedIn DM 1 · DM 2 · all grounded</div>
            </div>
          </div>
          <div style={{fontSize:12,color:"var(--slate-500)",lineHeight:1.55,paddingLeft:6,marginBottom:8}}>
            <strong style={{color:"var(--slate-700)"}}>You approve weekly.</strong> Doug walks the messaging review with Jorge, Bahigh, or the franchise-dev lead. Nothing ships without sign-off the first month.
          </div>
          <Pipe height={32}/>

          {/* Step 4: Delivery — branch into two channels */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="4" label="Delivery · two channels, one orchestration"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>send concurrently · throttled to operator inbox patterns</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginBottom:8}}>
            {channels.map((c,i) => (
              <div key={i} style={{padding:"18px 20px",border:"1px solid var(--mist)",borderRadius:12,background:"#fff",borderTop:`4px solid ${c.bar}`}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:c.bar,fontWeight:700,textTransform:"uppercase",marginBottom:8}}>{c.tag}</div>
                <div style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em"}}>{c.head}</div>
                <div style={{fontSize:12.5,color:"var(--slate-500)",marginTop:4,lineHeight:1.5}}>{c.sub}</div>
              </div>
            ))}
          </div>
          {/* Merge converter */}
          <div style={{position:"relative",height:48}}>
            <div style={{position:"absolute",left:"25%",top:0,bottom:16,width:2,background:"linear-gradient(180deg, rgba(33,168,242,0.25), #21A8F2)"}}/>
            <div style={{position:"absolute",left:"75%",top:0,bottom:16,width:2,background:"linear-gradient(180deg, rgba(33,168,242,0.25), #21A8F2)"}}/>
            <div style={{position:"absolute",left:"25%",right:"25%",bottom:16,height:2,background:"#21A8F2"}}/>
            <div style={{position:"absolute",left:"50%",bottom:0,width:2,height:16,background:"#21A8F2",transform:"translateX(-1px)"}}/>
          </div>

          {/* Step 5: Reply agent */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="5" label="Reply Agent · live in Slack"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>median time-to-classify: 4 minutes</span>
          </div>
          <div style={{padding:"20px 24px",background:"linear-gradient(135deg,#1C1C24 0%,#2A2A36 100%)",borderRadius:12,color:"#fff",marginBottom:8}}>
            <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:14}}>
              <div style={{padding:"14px 16px",background:"rgba(33,168,242,0.10)",border:"1px solid rgba(33,168,242,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>CLASSIFY</div>
                <div style={{fontSize:13,color:"#fff",lineHeight:1.5}}>Positive · neutral · not interested · OOO · wrong person. Within minutes.</div>
              </div>
              <div style={{padding:"14px 16px",background:"rgba(61,220,151,0.10)",border:"1px solid rgba(61,220,151,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#3DDC97",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>DRAFT</div>
                <div style={{fontSize:13,color:"#fff",lineHeight:1.5}}>Reply written in your voice. Two specific times offered. Calendar link as fallback.</div>
              </div>
              <div style={{padding:"14px 16px",background:"rgba(255,133,89,0.10)",border:"1px solid rgba(255,133,89,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#FF8559",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>BOOK + ROUTE</div>
                <div style={{fontSize:13,color:"#fff",lineHeight:1.5}}>Conversation lands on the right Playkout rep&rsquo;s calendar. No dashboard hunting.</div>
              </div>
            </div>
            <div style={{marginTop:14,paddingTop:12,borderTop:"1px dashed rgba(255,255,255,0.15)",fontSize:12,color:"rgba(255,255,255,0.65)",lineHeight:1.55}}>
              Every reply lands in a dedicated Slack channel. You see it, the AE sees it, the bench sees it. One source of truth, not a dashboard nobody opens.
            </div>
          </div>
          <Pipe height={32}/>

          {/* Outcome */}
          <div style={{textAlign:"center",padding:"24px 32px",background:"#21A8F2",borderRadius:14}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.16em",color:"rgba(255,255,255,0.75)",fontWeight:700,textTransform:"uppercase",marginBottom:8}}>OUTCOME · DAY 30 ONWARD</div>
            <div style={{fontSize:24,fontWeight:600,color:"#fff",letterSpacing:"-0.01em",lineHeight:1.3}}>
              A pre-qualified multi-unit operator, franchise developer,<br/>entertainment group, or club GM on Playkout&rsquo;s calendar. Every week.
            </div>
          </div>

          {/* Compounding loop footnote */}
          <div style={{marginTop:24,padding:"16px 20px",background:"#F6F8FB",border:"1px dashed var(--mist)",borderRadius:10,display:"flex",alignItems:"center",gap:14}}>
            <div style={{width:36,height:36,borderRadius:"50%",background:"#fff",border:"1px solid var(--mist)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#21A8F2" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
            </div>
            <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.55}}>
              <strong style={{color:"var(--shark)"}}>Compounding loop.</strong> Every booked conversation and signed operator feeds back into the seed list as a lookalike. The signal gets more accurate every month. The buyer profile sharpens against the operators Playkout actually signs, multi-unit fitness versus franchise developer versus entertainment group versus club and resort.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section: Software Impact (timing × infra × conversion) ─────────────
// Three coordinated visuals that make the software's effect concrete:
//   (A) Outreach-timing heatmap — when each Playkout operator-type opens email + LI
//   (B) Infrastructure stack    — the named systems, their throughput, and how they connect
//   (C) Conversion stack        — every stage's compression, signal → trial
function SoftwareImpact() {
  // ─── A · Timing Heatmap ────────────────────────────────────────────
  // Hours run 7am→7pm operator-local. Values are calibrated reply-rate
  // indices (100 = pool peak). Per-desk-type rows mirror the four ICPs.
  const days = ["Mon","Tue","Wed","Thu","Fri"];
  const hours = ["7","8","9","10","11","12","1","2","3","4","5","6"];
  const heatRows = [
    {
      desk: "Multi-Unit Fitness Operators",
      sub: "US · boutique-studio + gym groups",
      cells: [
        [22,46,71,94,82,40,30,62,84,72,48,28],
        [30,58,84,98,90,46,32,66,90,80,52,28],
        [28,54,80,96,86,44,34,68,88,76,50,26],
        [26,52,78,92,84,42,30,64,86,74,46,24],
        [18,36,58,72,60,30,22,48,62,50,30,16],
      ],
      peak: "Tue 10 AM local",
      window: "10-11 AM + 3-4 PM dual-peak",
    },
    {
      desk: "Franchise Developers",
      sub: "Multi-unit franchisees · area developers",
      cells: [
        [20,38,64,88,92,28,18,44,72,82,58,24],
        [28,52,82,98,96,30,18,50,80,90,66,22],
        [30,56,84,96,90,28,18,52,82,90,64,22],
        [26,48,78,92,88,28,18,48,76,86,60,20],
        [14,28,48,60,54,18,14,32,46,52,36,14],
      ],
      peak: "Wed 10-11 AM local",
      window: "10-11 AM, then 3-4 PM after site visits",
    },
    {
      desk: "Real-Estate Entertainment Groups",
      sub: "Heads of development · experiential",
      cells: [
        [32,52,72,82,68,40,38,56,72,64,42,22],
        [40,62,84,92,76,46,42,64,80,72,48,22],
        [42,64,84,90,74,44,40,62,78,70,46,20],
        [38,60,80,86,72,42,38,58,74,66,42,18],
        [22,40,56,64,50,28,26,40,52,46,28,12],
      ],
      peak: "Tue + Wed 9-10 AM local",
      window: "9-10 AM · before the build day starts",
    },
    {
      desk: "Country Club / Resort GMs",
      sub: "GMs · amenity + member-experience leads",
      cells: [
        [16,28,52,76,82,36,28,52,74,82,68,42],
        [22,38,68,92,98,42,30,62,86,94,76,44],
        [24,40,70,90,94,40,28,60,84,90,72,40],
        [22,36,66,86,90,38,26,56,80,86,68,36],
        [12,22,38,54,58,24,18,32,50,56,40,18],
      ],
      peak: "Tue 11 AM + 4 PM local",
      window: "11 AM and 4 PM, between member events",
    },
  ];
  const [activeRow, setActiveRow] = useState(0);
  const heatColor = (v) => {
    // Calibrated sky→shark gradient. v in [0,100].
    if (v >= 90) return { bg:"#0E7DBC", fg:"#fff" };
    if (v >= 75) return { bg:"#21A8F2", fg:"#fff" };
    if (v >= 60) return { bg:"#5AC0FF", fg:"#0B2A3F" };
    if (v >= 45) return { bg:"#A4DCFC", fg:"#0B2A3F" };
    if (v >= 30) return { bg:"#D7EEFE", fg:"#475569" };
    if (v >= 15) return { bg:"#EEF7FE", fg:"#94A3B8" };
    return         { bg:"#F8FAFC", fg:"#CBD5E1" };
  };

  // ─── B · Infrastructure Stack ──────────────────────────────────────
  // Four named layers, each with a real throughput / capacity number,
  // connected by directional arrows. Read top→bottom: list in, demos out.
  const infra = [
    {
      tag:"INGRESS",
      color:"#9D4EDD", tint:"#F4ECFE",
      name:"Universe + 6-Signal Layer",
      one:"Deduped roster scored daily against ICP.",
      kpi:[{v:"18,000", l:"records"},{v:"6", l:"signal sources"},{v:"daily", l:"refresh"}],
    },
    {
      tag:"OUTREACH",
      color:"#21A8F2", tint:"#E9F5FE",
      name:"AICRO Send + Connect + Outreach Agent",
      one:"Email + LinkedIn in parallel, per-row composer, CRO-approved.",
      kpi:[{v:"75+", l:"warm inboxes"},{v:"98.4%", l:"deliverability"},{v:"6-8", l:"LI seats"}],
    },
    {
      tag:"REPLY",
      color:"#0E9F66", tint:"#E5F9F0",
      name:"Reply Agent in Slack",
      one:"Classified in minutes, drafted in your voice, two times + fallback.",
      kpi:[{v:"~4 min", l:"to classify"},{v:"6 states", l:"reply taxonomy"},{v:"100%", l:"surfaced"}],
    },
    {
      tag:"COMPOUND",
      color:"#FF8559", tint:"#FFEEE5",
      name:"AICRO Rounds + Lookalike Loop",
      one:"Daily CRM grade, closed-won lookalike feedback, weekly recalibration.",
      kpi:[{v:"daily", l:"CRM grade"},{v:"monthly", l:"lookalike refresh"},{v:"weekly", l:"Doug in the room"}],
    },
  ];

  // ─── C · Conversion Stack (compression view) ──────────────────────
  // Each step shows pool size + duration, with the compression each tool delivers
  // versus the in-house baseline. Color codes match infrastructure layers.
  // Stack runs past "operator signed" because the unit that matters is
  // opened locations and operator referrals, not the signed-LOI flag.
  // The compounding stages (opened units + lookalike loop) are the real ROI.
  const stack = [
    { stage:"Universe scored",       pool:"18,000", unit:"records",              delta:"-",                  who:"Universe + Signal",                 baseline:"3 weeks manual list build, instant here", color:"#9D4EDD" },
    { stage:"Signal-fit shortlist",  pool:"4,200",  unit:"high-fit accounts",    delta:"-77% from universe", who:"Signal Layer scoring",              baseline:"buyer list trimmed nightly",              color:"#9D4EDD" },
    { stage:"Contacted",             pool:"3,140",  unit:"this 30-day batch",    delta:"-25% to live touch", who:"AICRO Send + Connect",              baseline:"vs. 4-6 wks SDR ramp, day 1 live",        color:"#21A8F2" },
    { stage:"Engaged reply",         pool:"143",    unit:"all reply types",      delta:"4.6%",               who:"Outreach Agent personalization",    baseline:"3x lift vs. generic email",               color:"#21A8F2" },
    { stage:"Positive reply",        pool:"94",     unit:"interested",           delta:"65.7%",              who:"Voice-locked composer",             baseline:"benchmark PRR by operator-type",          color:"#0E9F66" },
    { stage:"Intro call booked",     pool:"22",     unit:"on Playkout calendar", delta:"23.4%",              who:"Reply Agent, 2-times CTA",          baseline:"~4 min median, no admin lift",            color:"#0E9F66" },
    { stage:"Site tour / deep dive", pool:"6",      unit:"evaluating a build",   delta:"27.3%",              who:"AICRO Rounds, call to tour trigger", baseline:"+118% vs. unmanaged pipeline",            color:"#0E9F66" },
    { stage:"Operator signed",       pool:"1-2",    unit:"LOIs / agreements per mo",delta:"~25% tour-to-sign",who:"Playkout concept + Dallas proof",   baseline:"the agreement; the build starts here",    color:"#FF8559" },
    { stage:"Locations opened",      pool:"1-3",    unit:"units in build / mo",  delta:"build ramp",         who:"Playkout dev team + Rounds nudges", baseline:"the unit that grows the footprint",       color:"#FF8559" },
    { stage:"Compounding referral",  pool:"3-5",    unit:"warm intros / mo",     delta:"month 4 onward",     who:"Lookalike loop + signed-operator seed", baseline:"the next operators, cheaper than the first ones", color:"#FF8559" },
  ];

  const [r] = [activeRow];

  return (
    <section className="section" id="impact">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>03 / The software, drawn</span>
          <h2>The Orchestration is the workflow. This is what compounds when it runs.</h2>
          <p>Three lenses on the same engine: <strong>when</strong> each Playkout buyer responds, <strong>what</strong> infrastructure carries the touch, <strong>how much</strong> compression every stage adds over the in-house baseline.</p>
        </div>

        {/* ── (A) TIMING HEATMAP ─────────────────────────────────────── */}
        <div className="card" style={{padding:0,overflow:"hidden",marginBottom:18}}>
          <div style={{padding:"22px 28px 8px 28px",borderBottom:"1px solid var(--mist)"}}>
            <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:14,flexWrap:"wrap"}}>
              <div>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>03A · OUTREACH TIMING</div>
                <h3 style={{fontSize:22,margin:0,letterSpacing:"-0.01em"}}>When each buyer actually opens.</h3>
              </div>
              <div style={{fontSize:12,color:"var(--slate-500)",maxWidth:520,lineHeight:1.55}}>
                Calibrated reply-rate indices (100 = pool peak) across 5 weekdays × 12 operator-local hours. Sends are throttled to these windows automatically. Off-window sends still go, just down-weighted to keep deliverability healthy.
              </div>
            </div>
            <div style={{display:"flex",gap:8,marginTop:18,flexWrap:"wrap"}}>
              {heatRows.map((row,i) => (
                <button
                  key={i}
                  onClick={() => setActiveRow(i)}
                  style={{
                    padding:"8px 14px",
                    borderRadius:99,
                    border: activeRow === i ? "1px solid #21A8F2" : "1px solid var(--mist)",
                    background: activeRow === i ? "#E9F5FE" : "#fff",
                    color: activeRow === i ? "#0E7DBC" : "var(--slate-700)",
                    fontSize:12.5,
                    fontWeight: activeRow === i ? 600 : 500,
                    cursor:"pointer",
                    transition:"all .15s ease",
                  }}
                >
                  {heatRows[i].desk}
                </button>
              ))}
            </div>
          </div>
          <div style={{padding:"24px 28px 28px 28px"}}>
            <div style={{display:"grid",gridTemplateColumns:"56px repeat(12, 1fr)",gap:6,marginBottom:6}}>
              <div></div>
              {hours.map((h,i) => (
                <div key={i} style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",textAlign:"center"}}>{h}{i === 5 ? "p" : i >= 6 ? "p" : "a"}</div>
              ))}
            </div>
            {heatRows[r].cells.map((row,di) => (
              <div key={di} style={{display:"grid",gridTemplateColumns:"56px repeat(12, 1fr)",gap:6,marginBottom:6}}>
                <div style={{fontSize:11,fontWeight:600,color:"var(--slate-700)",display:"flex",alignItems:"center",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>{days[di]}</div>
                {row.map((v,hi) => {
                  const c = heatColor(v);
                  return (
                    <div key={hi} style={{
                      background:c.bg,
                      color:c.fg,
                      borderRadius:5,
                      padding:"10px 0",
                      fontSize:10,
                      fontWeight:600,
                      textAlign:"center",
                      letterSpacing:"-0.02em",
                      fontFamily:"'JetBrains Mono',monospace",
                    }}>{v}</div>
                  );
                })}
              </div>
            ))}
            <div style={{marginTop:18,display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
              <div style={{padding:"14px 18px",background:"#F6F8FB",border:"1px solid var(--mist)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.08em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>Peak send window</div>
                <div style={{fontSize:14,color:"var(--shark)",fontWeight:600}}>{heatRows[r].peak}</div>
                <div style={{fontSize:12,color:"var(--slate-500)",marginTop:4,lineHeight:1.45}}>{heatRows[r].window}</div>
              </div>
              <div style={{padding:"14px 18px",background:"#E9F5FE",border:"1px solid rgba(33,168,242,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.08em",color:"#0E7DBC",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>Effect</div>
                <div style={{fontSize:13.5,color:"var(--slate-700)",lineHeight:1.55}}>
                  Routing the right desk-type to the right hour shifts reply rate <strong style={{color:"#0E7DBC"}}>2.2× to 3.4×</strong> versus a flat 9-5 send cadence. The same copy, just scheduled differently.
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* ── (B) INFRASTRUCTURE STACK ───────────────────────────────── */}
        <div className="card" style={{padding:"28px 32px",marginBottom:18}}>
          <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:14,flexWrap:"wrap",marginBottom:24}}>
            <div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#9D4EDD",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>03B · INFRASTRUCTURE</div>
              <h3 style={{fontSize:22,margin:0,letterSpacing:"-0.01em"}}>The named systems doing the work.</h3>
            </div>
            <div style={{fontSize:12,color:"var(--slate-500)",maxWidth:520,lineHeight:1.55}}>
              Four layers. Each feeds the next. Numbers are AICRO active-book throughput, Playkout hits these within 90 days.
            </div>
          </div>
          <div style={{display:"flex",flexDirection:"column",gap:0}}>
            {infra.map((row,i) => (
              <Fragment key={i}>
                <div style={{
                  display:"grid",
                  gridTemplateColumns:"minmax(0,1fr) 360px",
                  gap:0,
                  border:"1px solid var(--mist)",
                  borderLeft:`4px solid ${row.color}`,
                  borderRadius:12,
                  overflow:"hidden",
                  background:"#fff",
                  alignItems:"stretch",
                }}>
                  <div style={{padding:"18px 22px",display:"flex",flexDirection:"column",justifyContent:"center",gap:6,background:`linear-gradient(90deg, ${row.tint} 0%, #fff 100%)`}}>
                    <div style={{display:"flex",alignItems:"center",gap:10}}>
                      <span style={{padding:"3px 10px",background:row.color,color:"#fff",borderRadius:99,fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,fontWeight:800,letterSpacing:"0.12em"}}>{row.tag}</span>
                      <span style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em"}}>{row.name}</span>
                    </div>
                    <div style={{fontSize:12.5,color:"var(--slate-500)",lineHeight:1.45,maxWidth:540}}>{row.one}</div>
                  </div>
                  <div style={{padding:"14px 20px",display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:8,alignItems:"center",borderLeft:"1px solid var(--mist)"}}>
                    {row.kpi.map((k,j) => (
                      <div key={j} style={{textAlign:"center"}}>
                        <div style={{fontSize:18,fontWeight:700,color:row.color,letterSpacing:"-0.01em",lineHeight:1}}>{k.v}</div>
                        <div style={{fontSize:9,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em",marginTop:5,lineHeight:1.3,textTransform:"uppercase"}}>{k.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
                {i < infra.length - 1 && (
                  <div style={{display:"flex",justifyContent:"center",padding:"6px 0"}}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={row.color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v16"/><path d="M5 13l7 7 7-7"/></svg>
                  </div>
                )}
              </Fragment>
            ))}
          </div>
        </div>

        {/* ── (C) CONVERSION STACK ───────────────────────────────────── */}
        <div className="card" style={{padding:"28px 32px"}}>
          <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:14,flexWrap:"wrap",marginBottom:24}}>
            <div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#0E9F66",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>03C · CONVERSION FOCUS</div>
              <h3 style={{fontSize:22,margin:0,letterSpacing:"-0.01em"}}>Every stage, how much compression we add.</h3>
            </div>
            <div style={{fontSize:12,color:"var(--slate-500)",maxWidth:520,lineHeight:1.55}}>
              Pool size, conversion, the tool doing the work, and the in-house baseline it beats. Each row is an investable compression point.
            </div>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"180px 110px 100px 1fr 1fr",columnGap:0,fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.08em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,paddingBottom:10,borderBottom:"1px solid var(--mist)",marginBottom:0}}>
            <div>Stage</div>
            <div>Pool</div>
            <div style={{textAlign:"center"}}>→ Next</div>
            <div style={{paddingLeft:18}}>System doing the work</div>
            <div style={{paddingLeft:18}}>Baseline · in-house build</div>
          </div>
          {stack.map((s,i) => {
            // Bar width scales logarithmically so universe and closed-customer
            // can sit in the same chart without burying the bottom rows.
            const poolNum = parseInt(s.pool.replace(/[^\d]/g, "")) || 1;
            const widthPct = Math.max(4, Math.min(100, (Math.log10(poolNum + 1) / Math.log10(33000)) * 100));
            return (
              <div key={i} style={{
                display:"grid",
                gridTemplateColumns:"180px 110px 100px 1fr 1fr",
                columnGap:0,
                padding:"14px 0",
                borderBottom: i < stack.length - 1 ? "1px solid var(--mist)" : "none",
                alignItems:"center",
              }}>
                <div style={{fontSize:13,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",display:"flex",alignItems:"center",gap:10}}>
                  <span style={{width:9,height:9,borderRadius:"50%",background:s.color,flexShrink:0,boxShadow:`0 0 0 3px ${s.color}22`}}></span>
                  {s.stage}
                </div>
                <div>
                  <div style={{position:"relative",height:18,background:"#F6F8FB",borderRadius:4,overflow:"hidden"}}>
                    <div style={{position:"absolute",inset:0,left:0,width:widthPct+"%",background:`linear-gradient(90deg, ${s.color}, ${s.color}cc)`,borderRadius:4}}></div>
                    <span style={{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"flex-start",paddingLeft:6,fontSize:10.5,fontWeight:700,color:widthPct > 24 ? "#fff" : "var(--shark)",fontFamily:"'JetBrains Mono',monospace"}}>{s.pool}</span>
                  </div>
                  <div style={{fontSize:10,color:"var(--slate-500)",marginTop:4,fontFamily:"'JetBrains Mono',monospace"}}>{s.unit}</div>
                </div>
                <div style={{textAlign:"center",fontSize:12.5,fontWeight:600,color:s.color,fontFamily:"'JetBrains Mono',monospace"}}>{s.delta}</div>
                <div style={{paddingLeft:18,fontSize:12.5,color:"var(--slate-700)",lineHeight:1.45}}>{s.who}</div>
                <div style={{paddingLeft:18,fontSize:12,color:"var(--slate-500)",lineHeight:1.45,fontStyle:"italic"}}>{s.baseline}</div>
              </div>
            );
          })}
          <div style={{marginTop:20,padding:"16px 20px",background:"#1C1C24",borderRadius:10,color:"#fff",display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
            <div style={{flex:1,minWidth:280}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,0.55)",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>What this means in one line</div>
              <div style={{fontSize:14,lineHeight:1.55,color:"#fff",fontWeight:500}}>
                A signed LOI is a flag. The unit that grows Playkout is opened locations and operator referrals. The engine doesn&rsquo;t stop at the signature, it keeps surfacing nudges until the operator is in build and feeding the next batch of lookalikes back into the seed.
              </div>
            </div>
            <div style={{padding:"12px 18px",background:"#21A8F2",borderRadius:10,color:"#fff",textAlign:"center",minWidth:160}}>
              <div style={{fontSize:9.5,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.14em",fontWeight:700,opacity:0.9,marginBottom:4}}>MONTH 4 ONWARD</div>
              <div style={{fontSize:15,fontWeight:600,lineHeight:1.3}}>Signed operators<br/>refer the next ones</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Matrix ─────────────────────────────────────
function Matrix() {
  const cols = ["Franchise broker / FSO", "In-house SDR build", "DIY tool stack", "AICRO"];
  const rows = [
    { row: "Time to first intro call", vals: [2, 1, 2, 4], aicro: "Day 30 to 45" },
    { row: "Signal-grounded outreach", vals: [1, 2, 2, 4], aicro: "6-source signal layer" },
    { row: "Venue-category operator in the room", vals: [1, 1, 1, 4], aicro: "Doug, weekly" },
    { row: "Reply triage in Slack", vals: [1, 1, 2, 4], aicro: "Reply Agent live" },
    { row: "Call booked + routed to rep", vals: [1, 2, 1, 4], aicro: "Qualified handoff" },
    { row: "Cost predictability", vals: [3, 1, 2, 4], aicro: "One retainer, no headcount" },
    { row: "Sports + experiential-venue fluency", vals: [1, 2, 1, 4], aicro: "Lucra Sports + 4 active" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">13 / Position</span>
          <h2>Not an agency. Not a tool. A fractional revenue org.</h2>
          <p>A CRO, a delivery team, and a product platform in one engagement, inside your CRM, paid as one monthly retainer. Run by the same operator who built the motion for Lucra Sports, Gumption, and Capitalize, calibrated for multi-unit fitness operators, franchise developers, real-estate entertainment groups, and club and resort GMs.</p>
        </div>
        <div className="matrix">
          <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>
  );
}

// ─── Phase 1 — Detect (cleaner signal map) ─────────────
function SignalMapVisual() {
  const nodes = [
    { x:"50%", y:"14%", cls:"hot",   tag:"FRANCHISE-DEV HIRE",         co:"Multi-unit fitness group · VP Development req" },
    { x:"22%", y:"36%", cls:"hot",   tag:"NEW LOCATION ANNOUNCED",     co:"Boutique-studio operator · 8th unit opening" },
    { x:"78%", y:"36%", cls:"warm",  tag:"RACQUET-AMENITY RFP",        co:"Country club · adding pickleball capacity" },
    { x:"22%", y:"66%", cls:"warm",  tag:"EXPERIENTIAL FUND ACTIVITY", co:"RE entertainment group · new venue fund" },
    { x:"78%", y:"66%", cls:"match", tag:"NO RACQUET FORMAT YET",      co:"Multi-unit operator · gym-only, footprint scaling" },
    { x:"50%", y:"86%", cls:"hot",   tag:"FITNESS / EXPERIENTIAL M&A", co:"Roll-up · doubled location count" },
  ];
  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">Live deal-team signals</span>
        <span className="v">142</span>
        <span className="s">↑ 18 new this week</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:"Job postings · VP / Director of Franchise Development", val:"Expansion plan outrunning the team in the JD" },
    { lbl:"New location + club opening announcements",     val:"Operator in active footprint-growth mode now" },
    { lbl:"Fitness + experiential M&A and roll-ups",       val:"Doubled unit count, looking for differentiated formats" },
    { lbl:"Amenity-gap detection · racquet RFPs",          val:"Operator scaling units, no competitive-social format yet" },
    { lbl:"Real-estate entertainment fund activity",       val:"Capital lined up for experiential venue builds" },
    { lbl:"IHRSA · ICSC · IFA Franchise Expo rosters",     val:"Event rosters carry expansion-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:"AICRO Send",
      tag:"EMAIL OUTBOUND PLATFORM",
      desc:"75+ warmed sender domains, calibrated for operator inbox patterns. Operator-to-operator language in every line, not vendor pitch. The signal that triggered the touch is the opener.",
      feats:["75+ warm domains", "Auto-failover routing", "98.4% deliverability"],
      stats:[ {v:"3,302", l:"sent / day"}, {v:"+72%", l:"reply rate"} ],
    },
    {
      mark:"connect",
      name:"AICRO Connect",
      tag:"LINKEDIN AUTOMATION",
      desc:"Multi-seat orchestration across 6 to 8 SDR profiles. Title-tier-aware: multi-unit operators and franchise developers get the A track; location managers get the C track. Proven 40% LinkedIn PRR on Lucra Sports Competitive Social.",
      feats:["Multi-seat orchestration", "Title-tier sequencing", "Operator vocabulary"],
      stats:[ {v:"40%", l:"positive rate"}, {v:"45%", l:"PGA audience PRR"} ],
    },
    {
      mark:"agent",
      name:"AICRO Outreach Agent",
      tag:"HYPER-PERSONALIZATION LAYER",
      desc:"Reads each operator's role, recent activity, and the signal that triggered the touch (a franchise-dev hire, a new location announced, a racquet-amenity RFP). Writes the relevance line. CRO-approved before send.",
      feats:["Signal-grounded copy", "Per-operator hook", "Human-in-the-loop QA"],
      stats:[ {v:"+37%", l:"acceptance"}, {v:"Live", l:"hot-reply triage"} ],
    },
  ];
  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 className="ostats">
            {p.stats.map((s,j) => (
              <div key={j} className="ostat">
                <span className="v">{s.v}</span>
                <span className="l">{s.l}</span>
              </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)" subtitleDot="#3DDC97" showApprove>
      <div className="slack-status-bar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
        Approved successful
      </div>
      <div className="slack-source-line"><strong>Source:</strong> 🔗 LinkedIn  |  <strong>Routed to:</strong> Playkout Rep 1</div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Name:</span>
          <span className="v">Daniel Carrington</span>
          <span className="k" style={{marginTop:6}}>Job Title:</span>
          <span className="v">VP Franchise Development</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Carrington Fitness Group · 18 studios · TX + FL</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">dan@carringtonfitness.example</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">LI | New location signal | Multi-unit operators</span>
        </div>
      </div>
      <div className="slack-pill"><span className="pdot"></span>Posted a VP Franchise Development role 12 days ago</div>
      <div className="slack-block">
        <span className="lbl">Last Reply:</span>
        <span className="val">We&rsquo;re opening four more studios next year and every operator in our market is racing to add racquet capacity. A gamified pickleball format with the stats and competitive-social piece is exactly the kind of differentiated draw we&rsquo;ve been looking at. How does a Playkout actually fit into a multi-unit build, and what does the operator economics look like?</span>
      </div>
      <div className="slack-block">
        <span className="lbl">Generated Response:</span>
        <span className="val">Dan, a multi-unit operator adding a competitive-social pickleball format is exactly who we built Playkout for. Our Dallas location proves the draw, the simulators track every ball and the gamified play brings members back. For a group opening four studios, we&rsquo;d walk the build footprint and the per-location operator economics on a call. I have Tuesday 2:30 or Thursday 11 Central. Want me to send the operator overview ahead of it?</span>
      </div>
      <div className="slack-actions">
        <span className="slack-action"><span className="pdot" style={{width:7,height:7,borderRadius:"50%",background:"#21A8F2"}}></span>iMessage</span>
        <span className="slack-action danger">Not An ICP</span>
        <span className="slack-action">📁 Battlecard</span>
        <span className="slack-action">📋 CRM</span>
        <span className="slack-action">📥 Inbox</span>
        <span className="slack-action">🔗 LinkedIn</span>
      </div>
      <div className="slack-thread">↳ 1 reply 2 days ago</div>
    </SlackCard>
  );
}

function SalesActionCard() {
  return (
    <SlackCard time="5:39 PM" subtitle="AICRO ROUNDS · GRADE A · SALES ACTION" subtitleDot="#3DDC97">
      <div style={{fontSize:12.5,color:"#fff",marginBottom:4}}>
        <strong>Summit Club Group | Sarah Holloway</strong> · <span style={{color:"#A8AFC0"}}>Intro Call Held · Stage: Site tour pending</span>
      </div>
      <div style={{fontSize:12,color:"#A8AFC0",marginBottom:10}}>Recommended for: Playkout Rep 2</div>
      <div className="slack-source-line">
        <strong>Source:</strong> CRM · <strong>Run:</strong> AICRO Rounds · Mon May 18
      </div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Contact:</span>
          <span className="v">Sarah Holloway</span>
          <span className="k" style={{marginTop:6}}>Title:</span>
          <span className="v">VP Development · Member Experience</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">s.holloway@summitclubgroup.example</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Summit Club Group · 9 clubs · TX + AZ</span>
        </div>
      </div>
      <div className="slack-engagement">
        <div className="slack-engagement-head">📊 Engagement</div>
        <div className="slack-engagement-line">• Last meaningful activity: <strong>14d ago</strong></div>
        <div className="slack-engagement-line">• Pattern: <em>Took the intro call, no site tour booked</em></div>
      </div>
      <div className="slack-block" style={{marginTop:10}}>
        <span style={{fontSize:12.5,color:"#fff",fontWeight:600}}>📞 TODAY · PHONE → Sarah Holloway (+1 ###-###-####)</span>
      </div>
      <div className="slack-quote">
        Sarah, Rounds flagged your account. You took the Playkout intro call on May 4 and haven&rsquo;t booked the Dallas site tour yet. Give me 15 minutes to walk the build footprint and the per-club operator economics. A 9-club group adding a competitive-social racquet format is exactly the operator the Dallas numbers were built to convince. Tuesday or Wednesday?
      </div>
      <div className="slack-callout">📞 If voicemail: Sarah, following up on the May 4 call. Texting you a 90-second clip of the Dallas floor running a live competitive-social session.</div>
      <div className="slack-callout" style={{color:"#A8AFC0",marginTop:8}}>
        <strong style={{color:"#fff"}}>Why now:</strong> Intro call held 14 days ago, no site tour booked, no follow-up logged. 9-club group in active amenity expansion means the format decision compounds across every location at once.
      </div>
      <div className="slack-signals">
        <span className="sl">Signals observed:</span>
        <ul>
          <li>Playkout intro call held May 4, 14 days ago, no site tour booked in CRM</li>
          <li>9 clubs across TX + AZ, both markets racing to add racquet capacity</li>
          <li>Posted a VP Development role last quarter, expansion plan ahead of formats</li>
        </ul>
      </div>
      <div className="slack-actions">
        <span className="slack-action">View Deal</span>
        <span className="slack-action success">✓ Handled</span>
        <span className="slack-action">📊 Show 3 similar wins</span>
        <span className="slack-action">↻ Try another angle</span>
        <span className="slack-action">💡 Why this priority?</span>
        <span className="slack-action danger">Not relevant</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
        </div>
        <ReplyAgentCard/>
      </div>
      <div className="convert-side">
        <div>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"var(--slate-500)",textTransform:"uppercase",marginBottom:10,fontWeight:500}}>
            ↳ Inbound Sales Agent · AICRO Rounds
          </div>
          <SalesActionCard/>
        </div>
      </div>
    </div>
  );
}

// ─── Phase 4 — Compound ─────────────────
function PhaseCompound() {
  const cards = [
    { l:"CAC", v:"−54%", d:"vs in-house SDR + manager" },
    { l:"Call → site tour booked", v:"+118%", d:"AICRO Rounds + Reply Agent" },
    { l:"Net-new operators in pipeline", v:"3.2×", d:"signal coverage uplift" },
    { l:"Time to insight", v:"−72%", d:"signal → action" },
  ];
  return (
    <div>
      <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:14,marginBottom:18}}>
        {cards.map((c,i) => (
          <div key={i} className="card" style={{padding:22}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:8}}>{c.l}</div>
            <div style={{fontSize:32,fontWeight:600,color:"var(--mint-deep)",letterSpacing:"-0.02em",lineHeight:1}}>{c.v}</div>
            <div style={{fontSize:12,color:"var(--slate-500)",marginTop:6}}>{c.d}</div>
          </div>
        ))}
      </div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 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}}>Monday: signal review with Jorge.<br/>Friday: pipeline MBR.<br/>Quarterly: next-stage expansion pipeline math.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Doug walks the room weekly. Every reply, every call booked, every operator signed makes the next signal sharper.</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}}>Compounding loop</div>
          <h3 style={{marginBottom:8,fontSize:18}}>Each operator you close<br/>makes the next one easier to find.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Closed-won operators feed back into the seed list as lookalikes. Quarterly refresh tunes the signal pack against the operator profiles that actually convert.</p>
        </div>
      </div>
    </div>
  );
}

// ─── System tabs — color-coded workflows ─────────────────────────────────
function SignalToScale() {
  const phases = [
    {
      num:"PHASE 01", title:"Detect", head:"Detect the signal across six surfaces.",
      body:"Franchise-development hires, new location and club openings, fitness and experiential M&A, racquet-amenity RFPs, real-estate entertainment fund activity, and the IHRSA + ICSC + IFA Franchise Expo conference rosters. The signal map fires when an operator is in the exact moment Playkout fits: scaling a footprint and hunting for a differentiated, competitive-social format to draw and retain members.",
      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:"Intelligent outreach.",
      body:"Three products, one campaign. AICRO Send runs the email engine across 75 warmed inboxes. AICRO Connect runs LinkedIn in parallel. The Outreach Agent personalizes every message from the operator signal that triggered it, peer to peer, never a vendor pitch.",
      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:"Booked intro calls, handed to your reps.",
      body:"The Reply Agent triages every reply and books the intro call within minutes. AICRO Rounds grades stalled opportunities against your live CRM, recommends the next action, and routes it to the right Playkout rep in Slack. Call-held-no-tour is a daily Rounds query. Your Playkout team handles the operator walkthrough and Dallas site tour once it lands.",
      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:"Compound performance.",
      body:"Every operator you sign sharpens the seed list. Signed-operator profiles feed back as lookalikes by operator-type and region, so the signal gets more accurate every month. The next operators are easier to find than the first ones ever were. Monday&rsquo;s signal review becomes the next franchise-expansion pipeline math.",
      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">07 / The system in motion</span>
          <h2>Signal to scale, in four phases.</h2>
          <p>Click each phase to switch the live workflow below. Detect, Outreach, Convert, Compound. Each is a different color and a different surface.</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>
  );
}

// ─── ICP DATA — segment switcher ─────────────
const ICP_DATA = {
  multi_unit_operators: {
    label: "Multi-Unit Fitness Operators",
    sub: "US · boutique-studio + gym groups",
    summary: "Multi-unit operators booking intro calls within the week.",
    summaryBody: "Multi-unit fitness and boutique-studio operators running 5 to 50 locations in active expansion are the strongest pool. The opener that converts is a new-location announcement plus a recent franchise-development hire on LinkedIn, a group scaling its footprint and hunting for a differentiated, competitive-social draw. A VP of franchise development at an 18-studio Texas group replied within hours of a signal-triggered LinkedIn DM. Illustrative of how the beachhead pool runs in the first 60 days.",
    kpis: { sent:"6,420", positives:"94", meetings:"22", pipeline:"31 operators in play", revenue:"3 site tours" },
    deltas: { sent:"+24% last 30d", positives:"+62% last 30d", meetings:"+57% last 30d", pipeline:"+148% last 30d", revenue:"+2 last 30d" },
    ratio: "68:1",
    campaigns: [
      { type:"em", name:"EM | New location signal | Multi-Unit Operators · TX + FL", sent:"2,820", contacted:"1,940", connReq:"-", connAcc:"-", positives:"38", posRate:"28.4%", accept:"-" },
      { type:"li", name:"LI | VP Franchise Dev | 5-50 Location Studio Groups", sent:"312", contacted:"264", connReq:"264", connAcc:"122", positives:"24", posRate:"61.1%", accept:"46.2%", active:true },
      { type:"em", name:"EM | Franchise-dev hire signal | Multi-Unit Operators", sent:"1,840", contacted:"1,218", connReq:"-", connAcc:"-", positives:"18", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Owner-Operators | Boutique Studio Roll-Ups", sent:"148", contacted:"122", connReq:"122", connAcc:"58", positives:"10", posRate:"52.6%", accept:"47.5%" },
      { type:"em", name:"EM | Fitness M&A · location jump | Multi-Market", sent:"1,120", contacted:"812", connReq:"-", connAcc:"-", positives:"4", posRate:"19.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | VP Franchise Dev | 5-50 Location Studio Groups",
      replies: 39, posPct: 61.5, neuPct: 38.5,
      funnel: [
        { stage:"Connection Requests", val:312, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:264, w:84, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"84.6%" },
        { stage:"Accepted", val:122, w:39, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"46.2%" },
        { stage:"Replied", val:39, w:14, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"32.0%" },
        { stage:"Positive", val:24, w:9, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"61.5%" },
        { stage:"Meetings", val:11, w:5, color:"#0E9F66", pct:"45.8%" },
        { stage:"Site Tours", val:3, w:3, color:"#0E9F66", pct:"3 active" },
        { stage:"Signed", val:1, w:2, color:"#0E9F66", pct:"1 signed" },
      ],
      recent: [
        { name:"Daniel Carrington · 18-studio TX group · VP Dev", date:"May 18", tag:"Site Tour Booked", booked:true },
        { name:"Lina Mansour · FL boutique-studio group · COO", date:"May 17", tag:"Intro Call Booked", booked:true },
        { name:"Maria Velez · multi-market FL operator · 22 locations", date:"May 16", tag:"Interested" },
        { name:"Brett Coleman · AZ gym group · M&A integrating", date:"May 15", tag:"Intro Call Booked", booked:true },
        { name:"Sofie Khan · GA + SC studio group · 14 locations", date:"May 14", tag:"Interested" },
        { name:"Reza Karimi · TX wellness operator · expansion mode", date:"May 13", tag:"Interested" },
        { name:"Marcus Pace · CO fitness group · 9 locations", date:"May 12", tag:"Interested" },
      ],
    },
  },
  franchise_developers: {
    label: "Franchise Developers",
    sub: "Multi-unit franchisees · area developers",
    summary: "Area developers responding to the new-format expansion angle.",
    summaryBody: "Franchise developers, multi-unit franchisees, and area developers with capital and territory in active build-out, where the question is which differentiated format to put behind the next units. The opener is an area-development agreement or a franchise-expansion post plus open development-team reqs. Heads of development and principal franchisees are the right title tier. Illustrative pool projection.",
    kpis: { sent:"4,140", positives:"28", meetings:"6", pipeline:"11 developers in play", revenue:"1 site tour" },
    deltas: { sent:"+18% last 30d", positives:"+44% last 30d", meetings:"+50% last 30d", pipeline:"+87% last 30d", revenue:"+1 last 30d" },
    ratio: "76:1",
    campaigns: [
      { type:"em", name:"EM | Area-development agreement signal | Franchise Devs", sent:"2,140", contacted:"1,388", connReq:"-", connAcc:"-", positives:"14", posRate:"24.0%", accept:"-" },
      { type:"li", name:"LI | Head of Development | Multi-Unit Franchisees", sent:"148", contacted:"112", connReq:"112", connAcc:"48", positives:"8", posRate:"52.9%", accept:"42.9%", active:true },
      { type:"em", name:"EM | Territory build-out | Multi-Market Developers", sent:"1,820", contacted:"1,124", connReq:"-", connAcc:"-", positives:"6", posRate:"19.4%", accept:"-" },
    ],
    drawer: {
      name: "LI | Head of Development | Multi-Unit Franchisees",
      replies: 15, posPct: 53.3, neuPct: 46.7,
      funnel: [
        { stage:"Connection Requests", val:148, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:112, w:76, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"75.7%" },
        { stage:"Accepted", val:48, w:32, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"42.9%" },
        { stage:"Replied", val:15, w:10, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"31.3%" },
        { stage:"Positive", val:8, w:5, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"53.3%" },
        { stage:"Meetings", val:3, w:2, color:"#0E9F66", pct:"37.5%" },
        { stage:"Site Tours", val:1, w:2, color:"#0E9F66", pct:"1 active" },
        { stage:"Signed", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Sarah Holloway · multi-brand area developer · TX + AZ", date:"May 18", tag:"Intro Call Booked", booked:true },
        { name:"Priya Anand · NY multi-unit franchisee · 12 units", date:"May 16", tag:"Interested" },
        { name:"Dale Foster · independent FL franchise developer", date:"May 14", tag:"Interested" },
        { name:"Nadia Cole · Southeast area developer · fitness brands", date:"May 13", tag:"Intro Call Booked", booked:true },
      ],
    },
  },
  re_entertainment_groups: {
    label: "Real-Estate Entertainment Groups",
    sub: "Experiential venue developers",
    summary: "Heads of development responding to the differentiated-anchor angle.",
    summaryBody: "Real-estate-backed entertainment and experiential groups building mixed-use and destination venues, where a competitive-social anchor tenant drives foot traffic and dwell time. The trigger is an experiential fund raise or a new venue announcement plus a development-team hire. Heads of development and experiential-leasing leads are the right title tier. Illustrative pool projection.",
    kpis: { sent:"3,420", positives:"22", meetings:"5", pipeline:"9 groups in play", revenue:"1 site tour" },
    deltas: { sent:"+16% last 30d", positives:"+36% last 30d", meetings:"+25% last 30d", pipeline:"+92% last 30d", revenue:"+1 last 30d" },
    ratio: "78:1",
    campaigns: [
      { type:"em", name:"EM | Experiential fund + new venue | RE Entertainment", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"10", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Head of Development | Experiential Venue Groups", sent:"148", contacted:"122", connReq:"122", connAcc:"54", positives:"8", posRate:"58.3%", accept:"44.3%", active:true },
      { type:"em", name:"EM | Mixed-use anchor search | Destination Developers", sent:"1,420", contacted:"918", connReq:"-", connAcc:"-", positives:"4", posRate:"21.1%", accept:"-" },
    ],
    drawer: {
      name: "LI | Head of Development | Experiential Venue Groups",
      replies: 14, posPct: 57.1, neuPct: 42.9,
      funnel: [
        { stage:"Connection Requests", val:148, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:122, w:82, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"82.4%" },
        { stage:"Accepted", val:54, w:36, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"44.3%" },
        { stage:"Replied", val:14, w:9, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"25.9%" },
        { stage:"Positive", val:8, w:5, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"57.1%" },
        { stage:"Meetings", val:3, w:2, color:"#0E9F66", pct:"37.5%" },
        { stage:"Site Tours", val:1, w:1, color:"#0E9F66", pct:"1 active" },
        { stage:"Signed", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Elin Ross · Head of Dev · TX experiential group", date:"May 18", tag:"Intro Call Booked", booked:true },
        { name:"Sanjay Mehta · CA mixed-use developer · leasing lead", date:"May 16", tag:"Interested" },
        { name:"Grace Holloway · GA destination-venue group · 4 sites", date:"May 15", tag:"Interested" },
        { name:"Viktor Salas · multi-market experiential developer", date:"May 13", tag:"Site Tour Booked", booked:true },
      ],
    },
  },
  club_resort_gms: {
    label: "Country Club / Resort GMs",
    sub: "Amenity + member-experience buyers",
    summary: "Club and resort GMs responding to the racquet-amenity angle.",
    summaryBody: "Country clubs, resorts, and hospitality groups adding racquet and competitive-social amenities to win and retain members, where the buyer feels the pressure to differentiate the member experience. The message leads with the amenity-upgrade wedge, a turnkey, gamified pickleball format that draws members of every age. GMs, directors of operations, and member-experience leads are the title tier. Illustrative pool projection.",
    kpis: { sent:"4,020", positives:"42", meetings:"9", pipeline:"16 clubs in play", revenue:"2 site tours" },
    deltas: { sent:"+22% last 30d", positives:"+58% last 30d", meetings:"+80% last 30d", pipeline:"+124% last 30d", revenue:"+2 last 30d" },
    ratio: "72:1",
    campaigns: [
      { type:"em", name:"EM | Racquet-amenity upgrade | Country Clubs · US", sent:"2,140", contacted:"1,418", connReq:"-", connAcc:"-", positives:"22", posRate:"26.4%", accept:"-" },
      { type:"li", name:"LI | GM / Member Experience | Clubs + Resorts", sent:"212", contacted:"180", connReq:"180", connAcc:"82", positives:"14", posRate:"56.0%", accept:"45.6%", active:true },
      { type:"em", name:"EM | Resort amenity refresh signal | Hospitality Groups", sent:"1,420", contacted:"918", connReq:"-", connAcc:"-", positives:"6", posRate:"22.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | GM / Member Experience | Clubs + Resorts",
      replies: 25, posPct: 56.0, neuPct: 44.0,
      funnel: [
        { stage:"Connection Requests", val:212, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:180, w:85, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"84.9%" },
        { stage:"Accepted", val:82, w:39, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"45.6%" },
        { stage:"Replied", val:25, w:12, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"30.5%" },
        { stage:"Positive", val:14, w:7, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"56.0%" },
        { stage:"Meetings", val:5, w:3, color:"#0E9F66", pct:"35.7%" },
        { stage:"Site Tours", val:2, w:2, color:"#0E9F66", pct:"2 active" },
        { stage:"Signed", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Tara Nguyen · US country club · GM", date:"May 18", tag:"Site Tour Booked", booked:true },
        { name:"Beau Carter · resort group · TX + AZ", date:"May 17", tag:"Intro Call Booked", booked:true },
        { name:"Imani Clarke · multi-club hospitality group · FL", date:"May 15", tag:"Interested" },
        { name:"Felipe Duarte · member-experience lead · resort", date:"May 14", tag:"Interested" },
      ],
    },
  },
};

// ─── Sparkline / AreaChart ─────────────────
function Sparkline({ values, color = "#21A8F2", w = 60, h = 22 }) {
  const max = Math.max(...values), min = Math.min(...values);
  const pts = values.map((v,i) => {
    const x = (i/(values.length-1))*w;
    const y = h - ((v-min)/(max-min || 1))*h;
    return `${x},${y}`;
  }).join(" ");
  return (
    <svg width={w} height={h}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function AreaChart({ values, color = "#0E9F66", w = 380, h = 90 }) {
  const max = Math.max(...values), min = Math.min(...values);
  const pts = values.map((v,i) => {
    const x = (i/(values.length-1))*w;
    const y = h - ((v-min)/(max-min || 1))*h*0.85 - 4;
    return `${x},${y}`;
  });
  const path = "M" + pts.join(" L");
  const area = path + ` L${w},${h} L0,${h} Z`;
  const labels = ["3/29","4/2","4/6","4/10","4/14","4/18","4/22","4/26"];
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h+18}`} preserveAspectRatio="none">
      <path d={area} fill={color} fillOpacity="0.18"/>
      <path d={path} fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
      {labels.map((l,i) => {
        const x = (i/(labels.length-1))*w;
        return <text key={i} x={x} y={h+14} fontSize="9" fill="#94A3B8" textAnchor={i===0 ? "start" : i===labels.length-1 ? "end" : "middle"} fontFamily="'JetBrains Mono',monospace">{l}</text>;
      })}
    </svg>
  );
}

// ─── Portal v2 ─────────────────
function ClientPortalV2({ icp }) {
  const data = ICP_DATA[icp];
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [tab, setTab] = useState("client");

  const emailSpark = [4200,3800,4400,3600,4100,3300,3900,3500,3800,3200,3500,3000];
  const liSpark = [25,32,38,45,52,48,46,42,38,34,30,28];

  return (
    <div className="portal-frame">
      <div className="portal-chrome">
        <div className="portal-dots"><span></span><span></span><span></span></div>
        <div className="portal-url">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z"/><circle cx="12" cy="10" r="3"/></svg>
          portal.aicro.co / playkout / executive-summary
        </div>
        <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace"}}>{data.label.toUpperCase()} · LIVE</div>
      </div>
      <div className="portal-app" style={{height: drawerOpen ? 720 : 720, gridTemplateColumns: "1fr"}}>
        <main className="portal-main" style={{position:"relative"}}>
          <div className="portal-v2-content">
            <div className="portal-v2-h">
              <div className="portal-v2-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
              </div>
              <h2>Executive Summary</h2>
            </div>
            <div className="portal-v2-sub">Last 30 Days · Key takeaways at a glance</div>

            <div className="executive-summary">
              <div className="es-head">
                <svg className="es-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg>
                <span className="es-title">{data.summary}</span>
              </div>
              <div className="es-body">{data.summaryBody}</div>
              <div className="es-meta">Updated daily by AICRO AI</div>
              <div className="es-cta">Review hot leads <span style={{marginLeft:2}}>→</span></div>
            </div>

            <div className="portal-v2-overview-h">
              <div>
                <h3>Overview</h3>
                <div className="sub">Stats refresh automatically every hour</div>
              </div>
              <div className="portal-v2-controls">
                <div style={{fontSize:10,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.1em",color:"var(--slate-500)",fontWeight:500}}>VIEWS</div>
                <div className="portal-v2-segment">
                  <div className="portal-v2-seg active">Compare</div>
                  <div className="portal-v2-seg" style={{color:"var(--slate-700)"}}>All</div>
                  <div className="portal-v2-seg" style={{color:"var(--slate-700)"}}>Email</div>
                  <div className="portal-v2-seg" style={{color:"var(--slate-700)"}}>LinkedIn</div>
                </div>
                <div style={{fontSize:10,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.1em",color:"var(--slate-500)",fontWeight:500}}>TIMEFRAME</div>
                <div className="portal-v2-time">📅 30 Days ▾</div>
              </div>
            </div>

            <div className="portal-v2-charts">
              <div className="portal-v2-chart">
                <div className="portal-v2-chart-h">
                  <span className="portal-v2-chart-title"><span style={{width:14,height:14,background:"#E5F9F0",borderRadius:3,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"#0E9F66",fontSize:9,fontWeight:700}}>✉</span>Email Sent</span>
                  <span className="portal-v2-chart-total">{data.kpis.sent.replace(/,$/, '')} total</span>
                </div>
                <AreaChart values={emailSpark} color="#0E9F66" h={70}/>
              </div>
              <div className="portal-v2-chart">
                <div className="portal-v2-chart-h">
                  <span className="portal-v2-chart-title"><span style={{width:14,height:14,background:"#E1ECFF",borderRadius:3,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"#1F4D9C",fontSize:9,fontWeight:700}}>in</span>LinkedIn Sent</span>
                  <span className="portal-v2-chart-total">370 total</span>
                </div>
                <AreaChart values={liSpark} color="#7E73E8" h={70}/>
              </div>
            </div>

            <div className="portal-v2-bars">
              <div className="portal-v2-bars-h">
                <span className="portal-v2-bars-title">Positive Replies by Channel (Weekly)</span>
                <div className="portal-v2-bars-legend">
                  <div className="item"><span className="sw" style={{background:"#0E9F66"}}></span>Email</div>
                  <div className="item"><span className="sw" style={{background:"#3B6CE6"}}></span>LinkedIn</div>
                </div>
              </div>
              <div className="portal-v2-bars-chart">
                {[
                  { tot:1, em:100, li:0, x:"Mar 23" },
                  { tot:73, em:77, li:23, x:"Mar 30" },
                  { tot:25, em:32, li:68, x:"Apr 6" },
                  { tot:37, em:27, li:73, x:"Apr 13" },
                ].map((c, i) => {
                  return (
                    <div key={i} className="portal-v2-bars-col">
                      <div className="portal-v2-bars-total">{c.tot}</div>
                      <div className="portal-v2-bars-stack" style={{height:Math.max(20, c.tot*1.4)+"px"}}>
                        {c.li > 0 && <div style={{background:"#3B6CE6",height:c.li+"%"}}>{c.li}%</div>}
                        {c.em > 0 && <div style={{background:"#0E9F66",height:c.em+"%"}}>{c.em}%</div>}
                      </div>
                      <div className="portal-v2-bars-x">{c.x}</div>
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="portal-v2-kpis">
              <div className="v2-kpi">
                <span className="l">Total sent</span>
                <span className="v">{data.kpis.sent}</span>
                <span className="d">↑ {data.deltas.sent}</span>
                <span className="spark"><Sparkline values={[40,42,38,44,41,46,48,52]} color="#9D4EDD"/></span>
              </div>
              <div className="v2-kpi">
                <span className="l">Positive replies</span>
                <span className="v">{data.kpis.positives}</span>
                <span className="d">↑ {data.deltas.positives}</span>
                <span className="spark"><Sparkline values={[10,12,14,18,22,26,32,40]} color="#0E9F66"/></span>
                <span className="ratio">{data.ratio}</span>
              </div>
              <div className="v2-kpi">
                <span className="l">Intro calls booked</span>
                <span className="v">{data.kpis.meetings}</span>
                <span className="d warn">↑ {data.deltas.meetings}</span>
              </div>
              <div className="v2-kpi">
                <span className="l">Pipeline value</span>
                <span className="v">{data.kpis.pipeline}</span>
                <span className="d warn">↑ {data.deltas.pipeline}</span>
              </div>
              <div className="v2-kpi">
                <span className="l">Site tours / Signed</span>
                <span className="v" style={{color:"var(--slate-400)"}}>{data.kpis.revenue}</span>
                <span className="d" style={{color:"var(--slate-400)"}}>{data.deltas.revenue}</span>
              </div>
            </div>

            <div className="portal-v2-tabs">
              <div className={"pt " + (tab==="client" ? "active" : "")} onClick={() => setTab("client")}>Client View</div>
              <div className={"pt " + (tab==="admin" ? "active" : "")} onClick={() => setTab("admin")}>Admin Queue (0)</div>
            </div>

            <div className="portal-v2-camp-h">
              <h3>Campaigns</h3>
              <div className="portal-v2-filter">▽ 2 Selected ▾</div>
            </div>

            <div className="campaigns-table">
              <table>
                <thead>
                  <tr>
                    <th>STATUS ↕</th>
                    <th>TYPE ↕</th>
                    <th>CAMPAIGN NAME ↕</th>
                    <th>SENT ↕</th>
                    <th>CONTACTED ↕</th>
                    <th>CONN. REQ ↕</th>
                    <th>CONN. ACC ↕</th>
                    <th>POSITIVES ↕</th>
                    <th>POS. RATE ↕</th>
                    <th>ACCEPT % ↕</th>
                  </tr>
                </thead>
                <tbody>
                  {data.campaigns.map((c, i) => (
                    <tr key={i} className={c.active ? "active-row" : ""} onClick={() => c.active && setDrawerOpen(true)}>
                      <td><span className="status-pill">● ACTIVE</span></td>
                      <td><span className={"ico-cell " + c.type}>{c.type === "li" ? "in" : "✉"}</span></td>
                      <td style={{color:"var(--slate-900)",fontWeight:500}}>{c.name}</td>
                      <td>{c.sent}</td>
                      <td>{c.contacted}</td>
                      <td>{c.connReq}</td>
                      <td>{c.connAcc}</td>
                      <td className={parseInt(c.positives) > 0 ? "pos" : ""}>{c.positives}</td>
                      <td>{c.posRate}</td>
                      <td>{c.accept}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {drawerOpen && (
            <Fragment>
              <div className="drawer-overlay" onClick={() => setDrawerOpen(false)}></div>
              <div className="drawer">
                <div className="drawer-head">
                  <div>
                    <div className="drawer-title">
                      <span className="status-pill" style={{background:"var(--mint-tint)",color:"var(--mint-deep)",fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.06em",fontWeight:600}}>● ACTIVE</span>
                      <span style={{color:"var(--slate-700)",fontWeight:500,fontSize:12}}>LinkedIn</span>
                      <span>{data.drawer.name}</span>
                    </div>
                    <div className="drawer-meta">
                      <span><strong>Replies:</strong> <span className="v">{data.drawer.replies}</span></span>
                      <span style={{color:"var(--mint-deep)",fontWeight:600}}>● {data.drawer.posPct}% Positive</span>
                      <span style={{color:"var(--slate-500)"}}>● {data.drawer.neuPct}% Neutral</span>
                    </div>
                    <div className="drawer-progress">
                      <div className="pos-fill" style={{width:data.drawer.posPct+"%"}}></div>
                      <div className="neu-fill" style={{width:data.drawer.neuPct+"%"}}></div>
                    </div>
                  </div>
                  <button className="drawer-x" onClick={() => setDrawerOpen(false)}>×</button>
                </div>
                <div className="drawer-body">
                  <div className="drawer-stats">
                    <div className="drawer-stats-tabs">
                      <div className="drawer-stats-tab active">Stats</div>
                      <div className="drawer-stats-tab">Copy</div>
                    </div>
                    {data.drawer.funnel.map((f,i) => (
                      <div key={i} className="funnel-bar">
                        <span className="stage">{f.stage}<svg className="info-i" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>
                        <span className="track">
                          <span className="fill" style={{width:f.w+"%",background:f.color}}>{f.val}</span>
                        </span>
                        <span className="pct">{f.pct}</span>
                      </div>
                    ))}
                    <div className="drawer-foot">
                      <div className="item">
                        <div className="l">MSG : POSITIVE</div>
                        <div className="v">{data.drawer.funnel[1].val && data.drawer.funnel[4].val ? Math.round(data.drawer.funnel[1].val / data.drawer.funnel[4].val) + ":1" : "—"}</div>
                        <div className="ind">Excellent</div>
                      </div>
                      <div className="item">
                        <div className="l">POSITIVE RATE</div>
                        <div className="v">{data.drawer.posPct}%</div>
                        <div className="ind">Excellent</div>
                      </div>
                    </div>
                  </div>
                  <div className="drawer-replies">
                    <div className="drawer-replies-h">
                      <h4>Campaign Replies</h4>
                      <span className="badge">● {data.drawer.replies}</span>
                    </div>
                    {data.drawer.recent.map((r,i) => (
                      <div key={i} className="drawer-reply">
                        <div className="drawer-reply-top">
                          <span className="drawer-reply-name">{r.name}</span>
                          <span className="drawer-reply-date">{r.date}</span>
                        </div>
                        <span className={"drawer-reply-tag " + (r.booked ? "booked" : "interested")}>{r.tag}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </Fragment>
          )}
        </main>
      </div>
    </div>
  );
}

// Consolidated: the live interactive portal + the four supporting screens
// in one continuous dark section. One narrative beat, not two.
function ClientPortalSection({ icp, setIcp }) {
  const shots = [
    { src:"uploads/pasted-1777222339189-0.png", label:"Executive Summary",          caption:"Monday view. Email plus 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. Connection request, accepted, replied, positive, intro call, site tour booked, end to end." },
    { src:"uploads/pasted-1777222050657-0.png", label:"Reply Agent in Slack",       caption:"A multi-unit operator's reply hits Slack within minutes, classified, response drafted, intro call booked. A Playkout rep approves before send." },
    { src:"uploads/pasted-1777222220819-0.png", label:"Sales Action · AICRO Rounds",caption:"A 9-club group took the intro call 14 days ago, no site tour. Rounds grades it Grade A, routes to the rep, writes the script." },
  ];
  return (
    <section className="section section-dark" id="portal">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow" style={{color:"rgba(255,255,255,.5)"}}>08 / Flagship</span>
          <h2>The Client Portal you operate from.</h2>
          <p style={{color:"rgba(255,255,255,.6)"}}>
            One pane of glass every Monday. Live interactive view on top, the four screens you actually live in below.
          </p>
        </div>
        <ClientPortalV2 icp={icp}/>
        <div style={{marginTop:48,paddingTop:32,borderTop:"1px solid rgba(255,255,255,0.08)"}}>
          <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",marginBottom:18,flexWrap:"wrap",gap:12}}>
            <div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,0.5)",textTransform:"uppercase",fontWeight:700,marginBottom:4}}>The four screens, in detail</div>
              <h3 style={{color:"#fff",fontSize:22,margin:0,letterSpacing:"-0.01em"}}>Monday summary, campaign drill-in, Slack reply agent, sales action card.</h3>
            </div>
            <span style={{fontSize:12,color:"rgba(255,255,255,0.55)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>real data, anonymized</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
            {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>
      </div>
    </section>
  );
}

// ─── CRO Stack ─────────────────
function CROStack() {
  const modules = [
    { l:"Strategy", t:"ICP & Signal Map", d:"4 operator-type pools (multi-unit operators, franchise developers, RE entertainment groups, club/resort GMs) across the US. 6 signal layers that fire when an operator is ready to add a Playkout. Quarterly refresh tuned against the profiles that sign.", delivs:["4 operator-type ICP cards","6-source signal architecture","Pool-concentration scorecard","Quarterly recalibration"] },
    { l:"Playbooks", t:"Productized SOPs", d:"Discovery scripts and call flows for multi-unit operators, franchise developers, entertainment-group heads of development, and club GMs. ROI framing: footprint differentiation and member draw. Operator-economics positioning, not a feature pitch.", delivs:["Discovery script · per operator-type","Intro call + operator-economics walkthrough","Positioning battlecards","Onboarding checklist"] },
    { l:"Comp", t:"Rep Comp Structure", d:"New-operator accelerators tuned to Playkout&rsquo;s expansion model. Tour-to-signed SPIFF. Override design for the franchise-development bench you hire next.", delivs:["Ramp plan · 90/180/365","Site-tour activation SPIFF","New-operator accelerator","Defendable model"] },
    { l:"Onboarding", t:"Operator Cadence", d:"Monday signal review with Jorge and Bahigh. Wednesday reply triage. Friday MBR. Quarterly next-stage expansion pipeline math run in your Slack.", delivs:["Monday signal review","Wednesday reply triage","Friday MBR","QBR + expansion pack"] },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">09 / The CRO Stack</span>
          <h2>One operator-built system. Run by people who&rsquo;ve sold this buyer.</h2>
          <p>You&rsquo;ve built the concept and Dallas proves it. What you need next is a proven motion to put net-new multi-unit operators, franchise developers, entertainment groups, and club GMs in front of you at volume. Strategy, playbooks, comp design, and onboarding, run as one system.</p>
        </div>
        <div className="cro-stack">
          <div className="cro-tree">
            <div className="cro-node lead">
              <span className="role">Fractional CRO · Doug Shankman</span>
              <span className="name">15+ yrs CRO · sports + experiential-venue operator · Lucra, Crexi, Capitalize lineage</span>
            </div>
            <div className="cro-children">
              <div className="cro-node">
                <span className="role">Revenue Strategist</span>
                <span className="name">Pipeline math, comp, board prep</span>
              </div>
              <div className="cro-node">
                <span className="role">Signal Architect</span>
                <span className="name">ICP, 6-source signal map, intent</span>
              </div>
              <div className="cro-node">
                <span className="role">Outbound Operator</span>
                <span className="name">Daily campaign management</span>
              </div>
              <div className="cro-node">
                <span className="role">RevOps Engineer</span>
                <span className="name">HubSpot build, agent deploy, data</span>
              </div>
              <div className="cro-node">
                <span className="role">Enablement Lead</span>
                <span className="name">Playbooks, deal coaching</span>
              </div>
            </div>
          </div>
          <div className="cro-modules">
            {modules.map((m,i) => (
              <div className="cro-mod" key={i}>
                <span className="mlbl">{m.l}</span>
                <span className="mtitle">{m.t}</span>
                <span className="mdesc">{m.d}</span>
                <ul className="mdelivs">
                  {m.delivs.map((d,j) => <li key={j}>{d}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Economics — $10K POC ─────────────────
function CostCompare() {
  return (
    <section className="section section-soft" id="economics">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">11 / Economics</span>
          <h2>$10,000 / month. Three months. Intro calls in 30 to 45 days.</h2>
          <p>One number. One commitment window. Same outcome target as a franchise-development hire plus tooling build, at a fraction of the time and cost.</p>
        </div>
        <div className="cost-grid">
          <div className="cost-card">
            <div className="cost-eyebrow">Build the demand engine yourself</div>
            <h3>2 SDRs + franchise-dev lead + tools.</h3>
            <p style={{color:"var(--slate-500)",fontSize:14,marginTop:6}}>9 to 12 months to first repeatable pipeline.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">2 SDRs + franchise-dev lead (loaded)</span><span className="val">$280 to $360K</span></div>
              <div className="cost-list-row"><span className="label">Founder oversight (Jorge + Bahigh)</span><span className="val">$120K opportunity cost</span></div>
              <div className="cost-list-row"><span className="label">Tool stack (5 to 7 logos)</span><span className="val">$30 to $50K</span></div>
              <div className="cost-list-row"><span className="label">Time to first repeatable pipeline</span><span className="val">9 to 12 months</span></div>
              <div className="cost-list-row total"><span className="label">Year 1 commitment</span><span className="val">$430 to $530K</span></div>
            </div>
            <div className="cost-meta">9 to 12 months and a new layer of management before you know if the build works.</div>
          </div>
          <div className="cost-card aicro">
            <div className="cost-eyebrow">AICRO · 3-month POC</div>
            <h3>$10,000 / month. Full engine.</h3>
            <p style={{color:"rgba(255,255,255,.65)",fontSize:14,marginTop:6}}>Doug as operator-CRO + delivery team + product platform. One bill.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">Months 1, 2, 3 (POC)</span><span className="val">$10,000 / month</span></div>
              <div className="cost-list-row"><span className="label">3-month total</span><span className="val">$30,000</span></div>
              <div className="cost-list-row"><span className="label">First booked intro calls</span><span className="val">Day 30 to 45</span></div>
              <div className="cost-list-row"><span className="label">Calls handed to your reps</span><span className="val">Day 45 onward</span></div>
              <div className="cost-list-row total"><span className="label">Cost vs. in-house Year 1</span><span className="val">~7% of build cost</span></div>
            </div>
            <div className="cost-meta">Time to value is the unit economic that matters here. The 3-month POC delivers four graded operator-type pools (multi-unit operators, franchise developers, RE entertainment groups, club/resort GMs), a live signal layer, booked intro calls on your reps&rsquo; calendars, and a fully-instrumented funnel. The in-house build delivers a franchise-development team that is still ramping.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Case studies — 5 ─────────────────
function CaseStudies() {
  const cases = [
    {
      co: "Lucra Sports",
      stage: "Competitive-social · same category",
      sector: "Competitive Social · Sports + Entertainment Venues",
      quote: "A competitive-social platform selling into the exact category Playkout lives in: sports, gaming, and entertainment venues. AICRO runs their cold outbound. The golf and PGA audience hit 45.45% PRR with 11 meetings, the LinkedIn Competitive Social play hit 40% PRR, and the account drove 27% of all booked meetings on our sports-venue book. Same buyer, same room, same reply pattern Playkout needs.",
      attr: "Lucra Sports · active engagement",
      systems: ["Operator-to-Operator Outbound", "Venue-Category Targeting", "Signal-Based Sequencing", "Reply Triage + Routing"],
      metrics: [
        { v: "27%", l: "of booked meetings", live: true },
        { v: "45.45%", l: "PGA audience PRR" },
        { v: "173+", l: "positive replies" },
      ],
    },
    {
      co: "Capitalize",
      stage: "AI · scaled to Series B",
      sector: "CRE Data & AI",
      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", "End-to-End Revenue Engineering", "Conference Campaigns", "CRO-led enablement"],
      metrics: [
        { v: "346", l: "meetings booked", live: true },
        { v: "$121K", l: "closed-won" },
        { v: "~65%", l: "conference PRR" },
      ],
    },
    {
      co: "Gumption",
      stage: "CRE marketplace",
      sector: "CRE 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: "$98.8M", l: "active pipeline", live: true },
        { v: "57.7%", l: "LinkedIn PRR" },
        { v: "~12", l: "meetings / month" },
      ],
    },
    {
      co: "Johnson Capital",
      stage: "Founder-led sender",
      sector: "CRE Capital Advisory",
      quote: "The right-fit track is finding the right people, and meetings are landing in our broker calendar weekly. The motion knows our industry.",
      attr: "Johnson Capital · advisory engagement",
      systems: ["Founder/Legacy-Led Sender", "Multi-Channel Sequencing", "Right-Fit Track", "CRO-led Pipeline Math"],
      metrics: [
        { v: "56-58%", l: "LinkedIn PRR", live: true },
        { v: "Founder", l: "led sender" },
        { v: "Weekly", l: "calendar fills" },
      ],
    },
    {
      co: "Worth Clark",
      stage: "High-volume operator recruiting",
      sector: "Real Estate Brokerage",
      quote: "Around half of every positive responder schedules a call immediately. The combination of reach and close rate is why this motion scales for an operator.",
      attr: "Worth Clark · brokerage engagement",
      systems: ["Multi-Channel Outbound", "Operator Recruiting Funnel", "Reply Triage", "CRO-led Cadence"],
      metrics: [
        { v: "~50%", l: "of positives → meeting", live: true },
        { v: "Operator", l: "recruiting funnel" },
        { v: "Multi-channel", l: "engine" },
      ],
    },
  ];
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">10 / Proof</span>
          <h2>We&rsquo;ve put competitive-social and venue products in front of operators. Repeatedly.</h2>
          <p>Five engagements that say the same thing. We know this buyer, we know operator-to-operator go-to-market, and we know how to put a venue concept in front of the operators, developers, and GMs who actually build. Lucra Sports is the closest read on Playkout: same category, same room, our active book.</p>
        </div>
        <div className="cs-grid" style={{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:18}}>
          {cases.map((c,i) => (
            <div className="cs-card" key={i}>
              <div className="cs-head">
                <div>
                  <div className="cs-co">{c.co}</div>
                  <div style={{fontSize:12,color:"var(--slate-500)",marginTop:2}}>{c.sector}</div>
                </div>
                <span className="cs-stage">{c.stage}</span>
              </div>
              <div className="cs-body">
                <p className="cs-quote">{c.quote}</p>
                <div className="cs-attr">{c.attr}</div>
                <div className="cs-systems">
                  <span className="cs-systems-lbl">Systems delivered</span>
                  {c.systems.map((s,j) => <div className="cs-system" key={j}>{s}</div>)}
                </div>
              </div>
              <div className="cs-metrics">
                {c.metrics.map((m,j) => (
                  <div className="cs-metric" key={j}>
                    <span className={"v " + (m.live ? "live" : "")}>{m.v}</span>
                    <span className="l">{m.l}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 90-day Gantt ─────────────────
function NinetyDay() {
  const workstreams = [
    {
      name: "ICP & Signal architecture",
      desc: "4-segment map · 6 signal sources · daily refresh",
      bars: [
        { left: 0, width: 14, label: "ICP + SIGNAL BUILD", cls: "amber" },
        { left: 14, width: 86, label: "GRADED OUTPUT FEEDS LIVE CAMPAIGNS", cls: "sky" },
      ],
      delivs: [
        { left: 7, label: "Day 7 · ICP locked" },
        { left: 14, label: "Day 14 · signals live" },
        { left: 50, label: "Day 60 · refresh" },
      ],
    },
    {
      name: "AICRO Send · Email Engine",
      desc: "75 warmed inboxes · operator-tuned · operator-CRO oversight",
      bars: [
        { left: 0, width: 18, label: "DOMAIN WARM-UP", cls: "amber" },
        { left: 18, width: 82, label: "LIVE SEQUENCES + DAILY OPTIMIZATION", cls: "sky" },
      ],
      delivs: [
        { left: 12, label: "Day 14 · warm" },
        { left: 22, label: "Day 21 · live" },
        { left: 50, label: "Day 60 · 25%+" },
      ],
    },
    {
      name: "AICRO Connect · LinkedIn Engine",
      desc: "Multi-seat across SDR profiles + Playkout principals (Jorge / Bahigh, with consent)",
      bars: [
        { left: 0, width: 8, label: "PROFILE SETUP", cls: "amber" },
        { left: 8, width: 92, label: "MULTI-SEAT CONNECT + INMAIL CAMPAIGNS", cls: "sky" },
      ],
      delivs: [
        { left: 6, label: "Day 7 · connected" },
        { left: 22, label: "Day 21 · campaign" },
        { left: 50, label: "Day 60 · 45%+" },
      ],
    },
    {
      name: "CRO + Reply Triage",
      desc: "Operator in the room weekly · Reply Agent triages every reply",
      bars: [
        { left: 0, width: 100, label: "OPERATOR IN THE ROOM · WEEKLY", cls: "shark" },
      ],
      delivs: [
        { left: 12, label: "Day 12 · pipeline" },
        { left: 50, label: "Day 50 · comp" },
        { left: 88, label: "Day 88 · QBR" },
      ],
    },
  ];
  return (
    <section className="section section-soft" id="timeline">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">12 / The 90-day build</span>
          <h2>Day 1 to Day 90, in deliverables you can hold.</h2>
          <p>Email and LinkedIn engines run in parallel under one operator. Every milestone is a shipped artifact, not a status update.</p>
        </div>
        <div className="gantt">
          <div className="gantt-head">
            <div className="col workstream">Workstream</div>
            <div className="col">Day 1<span className="day">Kickoff</span></div>
            <div className="col">Day 30<span className="day">First calls</span></div>
            <div className="col">Day 60<span className="day">Compounding</span></div>
            <div className="col">Day 90<span className="day">QBR</span></div>
          </div>
          {workstreams.map((w, i) => (
            <div className="gantt-row" key={i}>
              <div className="gantt-ws">
                <div className="name">{w.name}</div>
                <div className="desc">{w.desc}</div>
              </div>
              <div className="gantt-track">
                {w.bars.map((b, j) => (
                  <div key={j} className={"gantt-bar " + b.cls} style={{left:b.left+"%", width:b.width+"%"}}>{b.label}</div>
                ))}
                {w.delivs.map((d, j) => (
                  <div key={j} className="gantt-deliv" style={{left:d.left+"%", bottom: j % 2 ? 30 : 8}}>
                    <span className="pin"></span>{d.label}
                  </div>
                ))}
              </div>
            </div>
          ))}
          <div className="gantt-foot">
            <div className="gantt-legend"><span className="sw" style={{background:"linear-gradient(90deg,#21A8F2,#0E7DBC)"}}></span>Live execution</div>
            <div className="gantt-legend"><span className="sw" style={{background:"#1C1C24"}}></span>Continuous CRO ownership</div>
            <div className="gantt-legend"><span className="sw" style={{background:"#D97706"}}></span>Build / deploy</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CTA — custom demo via Calendly ─────────────
function CTA() {
  return (
    <section className="section" id="cta">
      <div className="wrap">
        <div className="cta-block">
          <div className="cta-block-bg"></div>
          <div className="cta-left" style={{flex:1}}>
            <span className="eyebrow" style={{color:"rgba(255,255,255,.5)"}}>14 / Custom demo + Q&amp;A</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>Jorge, the expansion engine is built. Let&rsquo;s walk it together.</h2>
            <p>We&rsquo;ve already built the Playkout instance. The orchestration layer is live: four operator-type pools graded (multi-unit operators, franchise developers, RE entertainment groups, club/resort GMs), signals firing across US markets, sample operator-to-operator sequences ready. We&rsquo;d rather walk you through it for 30 minutes than send another email. Pick a slot below and we&rsquo;ll run it live, take your questions, and you decide whether the next 90 days are with us.</p>
            <div style={{marginTop:32,display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
              <a href="https://calendly.com/doug-aicro/custom-demo-qa"
                 target="_blank" rel="noopener"
                 className="btn btn-lg"
                 style={{background:"#FF8559",color:"#fff",border:"none",fontWeight:600,padding:"14px 28px",borderRadius:99,fontSize:15,textDecoration:"none",letterSpacing:"-0.005em"}}>
                Book the custom demo + Q&amp;A →
              </a>
              <span style={{fontSize:13,color:"rgba(255,255,255,0.65)",lineHeight:1.5,flex:1,minWidth:280}}>
                30-minute live walkthrough on Calendly. No deck, no slides. The orchestration layer running in your tab against the four operator-type pools. You see what we&rsquo;d send to a multi-unit operator, a franchise developer, a head of development at an entertainment group, and a club GM on day one.
              </span>
            </div>
            <div style={{marginTop:18,fontSize:12,color:"rgba(255,255,255,0.45)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>
              calendly.com/doug-aicro/custom-demo-qa
            </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">PLAYKOUT · PROPOSAL · 2026-06-11</span>
      </div>
      <div>doug@aicro.co</div>
      <div className="footer-meta">© 2026 AICRO · Doug Shankman & Josh Kulchin, Co-Founders</div>
    </footer>
  );
}

// ─── Section: Prospect Universe ─────────────────────────────────────
function ProspectUniverse() {
  const verticals = [
    { v:"Multi-Unit Fitness Operators", stat:"19.8M", statLbl:"US pickleball players · 2024", frag:"With 19.8M US players and pickleball the fastest-growing US sport four years running, multi-unit fitness and boutique-studio operators are racing to add racquet capacity. Owners of 5 to 50-location groups feel the differentiation pressure first.", buyer:"VP Franchise Development / Owner-Operator" },
    { v:"Franchise Developers", stat:"~70K", statLbl:"US places to play · +55% YoY", frag:"Places to play grew 55% year over year and the supply gap is still widening. Franchise developers and area developers with capital and territory are hunting for a differentiated format to put behind their next units.", buyer:"Head of Development / Principal Franchisee" },
    { v:"Real-Estate Entertainment Groups", stat:"$7.9B", statLbl:"projected pickleball market · 2033", frag:"With the market projected to run to $7.9B by 2033, real-estate-backed entertainment and experiential groups want a competitive-social anchor that drives foot traffic and dwell time in mixed-use and destination builds.", buyer:"Head of Development / Experiential Leasing" },
    { v:"Country Club / Resort GMs", stat:"16.7%", statLbl:"of players are 25-34 · top cohort", frag:"The 25 to 34 cohort is the single most-represented pickleball age group, and clubs and resorts need amenities that draw younger members without losing the rest. A turnkey, gamified racquet format does both.", buyer:"General Manager / Member Experience" },
  ];
  return (
    <section className="section" id="universe">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>04 / Your prospect universe</span>
          <h2>We mapped the market you sell into.</h2>
          <p>Before a single email goes out, here is the buyer universe Playkout can win across the US. It is large and it is fragmented, which is exactly why an outbound engine compounds rather than saturates.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:18}}>
          {verticals.map((d,i) => (
            <div key={i} className="card" style={{padding:26,display:"flex",flexDirection:"column",gap:12}}>
              <div style={{fontSize:15,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em"}}>{d.v}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:12,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:34,fontWeight:600,letterSpacing:"-0.02em",color:"#21A8F2",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.05em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <p style={{fontSize:13,color:"var(--slate-500)",lineHeight:1.6,margin:0}}>{d.frag}</p>
              <div style={{marginTop:"auto",paddingTop:10,fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>
                <span style={{color:"var(--slate-400)"}}>BUYER · </span>{d.buyer}
              </div>
            </div>
          ))}
          <div className="card" style={{padding:26,background:"var(--shark)",display:"flex",flexDirection:"column",justifyContent:"center",gap:10}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600}}>The opportunity</div>
            <div style={{fontSize:15,lineHeight:1.55,color:"#fff",fontWeight:500}}>
              Tens of thousands of US multi-unit operators, franchise developers, entertainment-group developers, and club and resort GMs, all weighing how to add racquet capacity and a competitive-social draw. They will not all find Playkout on their own. That gap is the list we build, prioritize, and work every week.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section: A-Tier Targets · Why Now ─────────────────────────────────────
function ATierTargets() {
  const targets = [
    {
      co:"Xponential Fitness",
      vert:"Multi-Unit Fitness Operators",
      size:"US · multi-brand boutique-fitness franchisor",
      why:"Actively franchising multiple boutique brands across thousands of US units, always evaluating new formats.",
      how:"Playkout becomes a format the franchisor and its area developers add to drive differentiated foot traffic.",
      next:"One platform relationship opens a path to its whole franchisee network, not one location at a time.",
    },
    {
      co:"Life Time",
      vert:"Multi-Unit Fitness Operators",
      size:"US · premium athletic clubs · 150+ destinations",
      why:"Premium club operator continuously adding racquet and pickleball amenities to flagship destinations.",
      how:"Pilot a Playkout format inside one or two flagships, measure member draw and dwell time.",
      next:"Member-experience lift at premium-club scale is the cleanest proof for a national rollout.",
    },
    {
      co:"The Picklr",
      vert:"Franchise Developers",
      size:"US · fast-franchising pickleball brand",
      why:"Actively franchising dedicated pickleball clubs nationwide with active area-developer agreements.",
      how:"Position Playkout&rsquo;s simulator-and-stats format as the differentiated tech layer for their build pipeline.",
      next:"Category-native franchisor already sold on pickleball, the conversation is format, not demand.",
    },
    {
      co:"Chicken N Pickle",
      vert:"Real-Estate Entertainment Groups",
      size:"US · multi-location pickleball + entertainment venues",
      why:"Real-estate-backed entertainment operator expanding multi-acre destination venues across new markets.",
      how:"Add Playkout&rsquo;s gamified, simulator-tracked stations as the competitive-social anchor in new builds.",
      next:"Experiential developer whose whole model is the competitive-social draw Playkout sharpens.",
    },
    {
      co:"Invited (ClubCorp)",
      vert:"Country Club / Resort GMs",
      size:"US · 200+ country clubs + resorts",
      why:"Premier club operator adding racquet amenities portfolio-wide to win and retain younger members.",
      how:"Roll a turnkey Playkout format into select clubs, measure member acquisition and event revenue.",
      next:"Portfolio operator means one decision compounds across hundreds of clubs at once.",
    },
    {
      co:"Topgolf",
      vert:"Real-Estate Entertainment Groups",
      size:"US · large-format sports-entertainment venues",
      why:"Large-format experiential operator continuously evaluating adjacent competitive-social formats for venues.",
      how:"Pilot Playkout as a complementary racquet bay format inside an existing or new Topgolf footprint.",
      next:"Proven mass-market experiential operator, the format slots into an existing venue economics model.",
    },
  ];
  return (
    <section className="section section-soft" id="targets">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">05 / A-tier targets · why now</span>
          <h2>Not a category. A list. Here is who we&rsquo;d open with.</h2>
          <p>A few examples, not the full list. Each firm carries a structural reason to act, a specific way Playkout lands, and the wedge that makes it scalable. The complete A-list is scored and refreshed weekly once we are live.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:16}}>
          {targets.map((t,i) => (
            <div key={i} className="card" style={{padding:22,display:"flex",flexDirection:"column",gap:12}}>
              <div style={{display:"flex",alignItems:"center",gap:8}}>
                <span style={{padding:"3px 9px",borderRadius:99,background:"#E9F5FE",color:"#0E7DBC",fontFamily:"'JetBrains Mono',monospace",fontSize:9,fontWeight:700,letterSpacing:"0.06em",textTransform:"uppercase"}}>{t.vert}</span>
              </div>
              <div>
                <div style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.25}}>{t.co}</div>
                <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",marginTop:3}}>{t.size}</div>
              </div>
              <div style={{borderTop:"1px solid var(--mist)",paddingTop:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>Why now</div>
                <p style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5,margin:0}}>{t.why}</p>
              </div>
              <div>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"#0E9F66",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>How they use it</div>
                <p style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5,margin:0}}>{t.how}</p>
              </div>
              <div style={{marginTop:"auto",paddingTop:8,borderTop:"1px dashed var(--mist)"}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"var(--slate-400)",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>The wedge</div>
                <p style={{fontSize:12,color:"var(--slate-500)",lineHeight:1.5,margin:0,fontStyle:"italic"}}>{t.next}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{marginTop:20,padding:"18px 24px",background:"#fff",border:"1px solid var(--mist)",borderRadius:12,fontSize:13.5,color:"var(--slate-700)",lineHeight:1.6}}>
          Real firms. Illustrative angles. In week one we turn this into a scored, deduped A-list across all four segments with verified public signals (new location and club openings, franchise-development hires, fitness and experiential M&A, racquet-amenity RFPs), refreshed as new signals fire.
        </div>
      </div>
    </section>
  );
}

// ─── Section: ICP Launch Map ──────────────────────────────
// Built in response to Jorge's expansion goal: finding the right operator
// segments to fill the US franchise and multi-unit pipeline. Four tiers,
// named firms, real US locations, decision-maker title, the wedge to open with.
function ICPLaunchMap() {
  const tiers = [
    {
      tier:"T1",
      label:"Multi-Unit Fitness Operators",
      color:"#21A8F2", tint:"#E9F5FE",
      universe:"~8,000 US multi-unit groups",
      buyer:"VP Franchise Dev / Owner-Operator",
      wedge:"Active expansion plus a recent development hire. The operator is choosing differentiated formats for the next units this quarter.",
      firms:[
        { n:"Xponential Fitness",          loc:"Irvine, CA · multi-brand franchisor", tag:"already on A-list" },
        { n:"Life Time",                   loc:"Chanhassen, MN · 150+ destinations", tag:"already on A-list" },
        { n:"Crunch Fitness",              loc:"New York, NY · 400+ franchised gyms" },
        { n:"Bay Club",                    loc:"San Francisco, CA · premium clubs" },
        { n:"Chuze Fitness",               loc:"San Diego, CA · expanding multi-unit" },
        { n:"VASA Fitness",                loc:"Salt Lake City, UT · multi-state" },
        { n:"EoS Fitness",                 loc:"Dallas, TX · fast-expanding" },
        { n:"Mountainside Fitness",        loc:"Phoenix, AZ · regional multi-unit" },
        { n:"Onelife Fitness",             loc:"Atlanta, GA · multi-club operator" },
        { n:"Wellbridge",                  loc:"Denver, CO · premium athletic clubs" },
      ],
    },
    {
      tier:"T2",
      label:"Franchise Developers",
      color:"#9D4EDD", tint:"#F4ECFE",
      universe:"~5,000 active US developers",
      buyer:"Head of Development · Principal Franchisee",
      wedge:"Open area-development agreements plus territory in build-out. The differentiated format is the entire conversation.",
      firms:[
        { n:"The Picklr",                    loc:"Saratoga Springs, UT · pickleball franchisor", tag:"already on A-list" },
        { n:"Pickleball Kingdom",            loc:"Chandler, AZ · indoor pickleball franchise" },
        { n:"Camp Pickle",                   loc:"Birmingham, AL · eatertainment + pickleball" },
        { n:"Crunch franchisee groups",      loc:"Multi-market · multi-unit franchisees" },
        { n:"Planet Fitness developers",     loc:"Multi-market · area developers" },
        { n:"UFC GYM franchisees",           loc:"Multi-market · multi-unit operators" },
        { n:"Orangetheory area developers",  loc:"Multi-market · multi-unit franchisees" },
        { n:"D1 Training developers",        loc:"Nashville, TN · franchise developers" },
        { n:"Club Pilates multi-unit",       loc:"Multi-market · area developers" },
        { n:"F45 multi-studio franchisees",  loc:"Multi-market · multi-unit operators" },
      ],
    },
    {
      tier:"T3",
      label:"Real-Estate Entertainment Groups",
      color:"#0E9F66", tint:"#E5F9F0",
      universe:"~3,000 US experiential developers",
      buyer:"Head of Development / Experiential Leasing",
      wedge:"New venue or fund activity plus a development hire. A competitive-social anchor that drives foot traffic is the opener.",
      firms:[
        { n:"Chicken N Pickle",              loc:"Kansas City, MO · pickleball + entertainment", tag:"already on A-list" },
        { n:"Topgolf",                       loc:"Dallas, TX · large-format venues",  tag:"already on A-list" },
        { n:"Puttshack",                     loc:"Atlanta, GA · tech-mini-golf venues" },
        { n:"Pinstripes",                    loc:"Northbrook, IL · bowling + bocce + dining" },
        { n:"Main Event",                    loc:"Plano, TX · family entertainment" },
        { n:"PINSTACK",                      loc:"Dallas, TX · multi-format entertainment" },
        { n:"Bowlero",                       loc:"Mechanicsville, VA · bowling + venues" },
        { n:"Cordish Companies",             loc:"Baltimore, MD · mixed-use entertainment" },
      ],
    },
    {
      tier:"T4",
      label:"Country Club / Resort GMs",
      color:"#FF8559", tint:"#FFEEE5",
      universe:"~10,000 US clubs + resorts",
      buyer:"GM / Director of Ops / Member Experience",
      wedge:"Adding racquet amenities to win younger members. A turnkey, gamified pickleball format is the opener.",
      firms:[
        { n:"Invited (ClubCorp)",            loc:"Dallas, TX · 200+ clubs + resorts", tag:"already on A-list" },
        { n:"Troon",                         loc:"Scottsdale, AZ · golf + club management" },
        { n:"ClubLife / Concert Golf",       loc:"Newport Beach, CA · private clubs" },
        { n:"KSL Resorts",                   loc:"La Quinta, CA · luxury resorts" },
        { n:"Marriott resort amenities",     loc:"Bethesda, MD · resort portfolio" },
        { n:"Hyatt resort operations",       loc:"Chicago, IL · resort portfolio" },
        { n:"Bobby Jones Links",             loc:"Atlanta, GA · club management" },
        { n:"Heritage Golf Group",           loc:"Atlanta, GA · private clubs" },
      ],
    },
  ];
  return (
    <section className="section section-soft" id="icp-map">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">06 / ICP launch map · the first 50 operators</span>
          <h2>The right operators to fill the US pipeline, named and tiered.</h2>
          <p>A concentrated map for the US expansion launch. Four tiers, decision-maker title per tier, the wedge to open with, and the named firms we&rsquo;d work in week one. Total reachable universe across the four tiers: <strong>~26,000 US operators</strong>. Live signals refresh the list weekly once we are live; the platform-level partnership vectors are queued separately.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:14}}>
          {tiers.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 20px",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,letterSpacing:"0.06em"}}>{t.tier}</span>
                  <span style={{fontSize:15,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.25}}>{t.label}</span>
                </div>
                <div style={{fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.02em"}}>{t.universe}</div>
                <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",marginTop:3,letterSpacing:"0.02em"}}><strong style={{color:"var(--slate-700)"}}>BUYER · </strong>{t.buyer}</div>
              </div>
              <div style={{padding:"14px 20px 10px 20px",borderBottom:"1px solid var(--mist)"}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.10em",color:t.color,textTransform:"uppercase",fontWeight:700,marginBottom:5}}>The wedge</div>
                <p style={{fontSize:12,color:"var(--slate-700)",lineHeight:1.55,margin:0}}>{t.wedge}</p>
              </div>
              <div style={{padding:"14px 20px 18px 20px",flex:1}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.10em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,marginBottom:8}}>Named first-touch</div>
                <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:8}}>
                  {t.firms.map((f,j) => (
                    <li key={j} style={{display:"flex",flexDirection:"column",gap:1}}>
                      <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:6}}>
                        <span style={{fontSize:12.5,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.005em"}}>{f.n}</span>
                        {f.tag && <span style={{fontSize:8.5,fontWeight:700,color:t.color,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em",textTransform:"uppercase",whiteSpace:"nowrap"}}>★ A</span>}
                      </div>
                      <span style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.01em"}}>{f.loc}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
        <div style={{marginTop:20,padding:"18px 24px",background:"#1C1C24",borderRadius:12,color:"#fff",display:"flex",gap:24,alignItems:"center",flexWrap:"wrap"}}>
          <div style={{flex:1,minWidth:280}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,0.55)",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>What we&rsquo;d ship in week one</div>
            <div style={{fontSize:13.5,lineHeight:1.55,color:"#fff",fontWeight:500}}>
              Each named firm above gets enriched with role, recent signal, and direct-line contact (VP development name, principal franchisee name, GM name). Pattern-matched email plus LinkedIn approach paths. Tier&nbsp;1 + Tier&nbsp;2 get the first 60 days of send capacity (~75 inboxes split 60/40), Tier&nbsp;3 + Tier&nbsp;4 come online in week three.
            </div>
          </div>
          <div style={{padding:"12px 18px",background:"#FF8559",borderRadius:10,minWidth:200}}>
            <div style={{fontSize:9.5,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.12em",fontWeight:700,color:"rgba(255,255,255,0.85)",marginBottom:4,textTransform:"uppercase"}}>Parallel vector</div>
            <div style={{fontSize:13,fontWeight:600,color:"#fff",lineHeight:1.4}}>Franchisor platform intros: pitch at the multi-brand operator layer, not location-by-location, so one relationship opens a whole network.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── App ─────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const setIcp = (v) => setTweak('icp', v);

  return (
    <Fragment>
      <Nav/>
      <Hero dark={t.darkHero}/>
      <TrustStrip/>
      <MarketThesis/>
      <Orchestration/>
      <SoftwareImpact/>
      <ProspectUniverse/>
      <ATierTargets/>
      <ICPLaunchMap/>
      <SignalToScale/>
      <ClientPortalSection icp={t.icp} setIcp={setIcp}/>
      <CROStack/>
      <CaseStudies/>
      <CostCompare/>
      <NinetyDay/>
      <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")}
        />
        <TweakSection label="Client Portal scenario"/>
        <TweakSelect
          label="Segment"
          value={t.icp}
          options={[
            {value:"multi_unit_operators",    label:"Multi-Unit Fitness Operators"},
            {value:"franchise_developers",    label:"Franchise Developers"},
            {value:"re_entertainment_groups", label:"Real-Estate Entertainment Groups"},
            {value:"club_resort_gms",         label:"Country Club / Resort GMs"},
          ]}
          onChange={(v) => setTweak('icp', v)}
        />
        <div style={{fontSize:11,color:"rgba(41,38,27,.55)",lineHeight:1.5,marginTop:6}}>
          The Client Portal re-renders the Executive Summary, KPIs, campaigns table, and drawer for each segment.
        </div>
      </TweaksPanel>
    </Fragment>
  );
}

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