/* global React, ReactDOM */
const { useState, useEffect, useRef, useCallback } = React;

// ─── Design Tokens ────────────────────────────────────────────────────────────
const T = {
  black:    "#080808",
  offWhite: "#F2F2F0",
  greyDim:  "#333333",
  greyMid:  "#666666",
  greyLight:"#999999",
  greyRule: "#1A1A1A",
  accent:   "#C8B89A",
};

// ─── 50 Lead Profiles ─────────────────────────────────────────────────────────
const LEADS = [
  { name:"Arjun Mehta",         title:"Co-Founder & CEO",           company:"PropVault",           industry:"Real Estate Tech",          size:"42 employees",    signal:"Visited pricing page 3× this week",              avatar:"AM", platform:"LinkedIn" },
  { name:"Sarah Chen",          title:"Chief Revenue Officer",       company:"NexaFlow",            industry:"B2B SaaS",                  size:"180 employees",   signal:"Downloaded whitepaper on AI ops",                 avatar:"SC", platform:"LinkedIn" },
  { name:"Omar Al-Rashid",      title:"Managing Director",           company:"Meridian Capital",    industry:"Private Equity",            size:"28 employees",    signal:"Engaged with 2 competitor posts",                 avatar:"OA", platform:"LinkedIn" },
  { name:"Priya Nair",          title:"VP of Operations",            company:"LogiTrack",           industry:"Supply Chain",              size:"320 employees",   signal:"Posted about manual ops bottlenecks",             avatar:"PN", platform:"LinkedIn" },
  { name:"James Whitfield",     title:"Founder & MD",                company:"Whitfield Estates",   industry:"Luxury Real Estate",        size:"18 employees",    signal:"Viewed AI brochure case study twice",             avatar:"JW", platform:"LinkedIn" },
  { name:"Aisha Balogun",       title:"Chief Digital Officer",       company:"AfriPay",             industry:"Fintech",                   size:"210 employees",   signal:"Liked 3 posts on workflow automation",            avatar:"AB", platform:"LinkedIn" },
  { name:"Lucas Ferreira",      title:"CEO",                         company:"Construtech",         industry:"PropTech",                  size:"67 employees",    signal:"Commented on AI in construction post",            avatar:"LF", platform:"LinkedIn" },
  { name:"Nina Schreiber",      title:"Head of Growth",              company:"ScaleDesk",           industry:"HR Tech",                   size:"95 employees",    signal:"Searched for outbound automation tools",           avatar:"NS", platform:"LinkedIn" },
  { name:"Rajan Pillai",        title:"Managing Partner",            company:"Pillar Ventures",     industry:"VC / Investment",           size:"12 employees",    signal:"Viewed portfolio company profiles",                avatar:"RP", platform:"LinkedIn" },
  { name:"Emily Thornton",      title:"COO",                         company:"HealthBridge",        industry:"HealthTech",                size:"450 employees",   signal:"Published article on ops efficiency",              avatar:"ET", platform:"LinkedIn" },
  { name:"Khalid Al-Mansoori",  title:"CEO & Founder",               company:"DuneBuilders",        industry:"Real Estate Dev",           size:"55 employees",    signal:"Visited 4 pages on AI rendering",                 avatar:"KM", platform:"LinkedIn" },
  { name:"Tanya Osei",          title:"Director of Sales",           company:"ClearPipeline",       industry:"Sales Enablement",          size:"130 employees",   signal:"Opened email about AI sales sequences",            avatar:"TO", platform:"LinkedIn" },
  { name:"Marcus Webb",         title:"Founder",                     company:"Webb Legal",          industry:"Legal Tech",                size:"22 employees",    signal:"Asked about data privacy in AI tools",             avatar:"MW", platform:"LinkedIn" },
  { name:"Fatima Hussain",      title:"Chief Strategy Officer",      company:"GlobalRoute",         industry:"Logistics",                 size:"880 employees",   signal:"Shared post on autonomous ops",                   avatar:"FH", platform:"LinkedIn" },
  { name:"David Okonkwo",       title:"CTO & Co-Founder",            company:"BuildStack",          industry:"Construction Tech",         size:"48 employees",    signal:"Starred GitHub repo on LLM infrastructure",        avatar:"DO", platform:"LinkedIn" },
  { name:"Yuki Tanaka",         title:"VP Product",                  company:"Momentify",           industry:"Consumer SaaS",             size:"160 employees",   signal:"Posted about scaling customer onboarding",         avatar:"YT", platform:"LinkedIn" },
  { name:"Carlos Mendez",       title:"Regional Director",           company:"Apex Properties",     industry:"Commercial Real Estate",    size:"74 employees",    signal:"Downloaded floor plan AI demo",                    avatar:"CM", platform:"LinkedIn" },
  { name:"Hannah Müller",       title:"CEO",                         company:"FlowOps",             industry:"Process Automation",        size:"38 employees",    signal:"Commented on no-code AI thread",                   avatar:"HM", platform:"LinkedIn" },
  { name:"Siddharth Rao",       title:"Founder & CEO",               company:"Kredify",             industry:"Lending Tech",              size:"92 employees",    signal:"Attended AI in finance webinar",                   avatar:"SR", platform:"LinkedIn" },
  { name:"Nadia Petrov",        title:"Chief Commercial Officer",    company:"MedCore",             industry:"Healthcare",                size:"670 employees",   signal:"Liked post on patient workflow automation",         avatar:"NP", platform:"LinkedIn" },
  { name:"Tom Hargreaves",      title:"Co-Founder",                  company:"HargreavesLaw",       industry:"Legal Services",            size:"30 employees",    signal:"Visited self-hosted LLM page twice",               avatar:"TH", platform:"LinkedIn" },
  { name:"Zoe Adamson",         title:"Head of Marketing",           company:"PulseRetail",         industry:"Retail Tech",               size:"240 employees",   signal:"Searched for AI-driven DM tools",                  avatar:"ZA", platform:"LinkedIn" },
  { name:"Karan Bajaj",         title:"Managing Director",           company:"Bajaj Infra",         industry:"Infrastructure",            size:"1200 employees",  signal:"Engaged with 5 AI industry posts",                 avatar:"KB", platform:"LinkedIn" },
  { name:"Lena Brandt",         title:"CPO",                         company:"Gridline",            industry:"Energy Tech",               size:"85 employees",    signal:"Reposted article on AI ops",                      avatar:"LB", platform:"LinkedIn" },
  { name:"Ade Adeyemi",         title:"CEO",                         company:"AdFinance",           industry:"Investment Banking",        size:"45 employees",    signal:"Viewed competitor pricing 4×",                     avatar:"AA", platform:"LinkedIn" },
  { name:"Raj Sharma",          title:"Founder & CTO",               company:"DevPilot",            industry:"Developer Tools",           size:"29 employees",    signal:"Starred AI PR automation repo",                    avatar:"RS", platform:"LinkedIn" },
  { name:"Claire Dupont",       title:"VP Sales",                    company:"SkyMed",              industry:"MedTech",                   size:"310 employees",   signal:"Posted about manual follow-up problem",            avatar:"CD", platform:"LinkedIn" },
  { name:"Ivan Petrov",         title:"CEO",                         company:"BalticLogistics",     industry:"Freight & Logistics",       size:"560 employees",   signal:"Opened 3 emails on workflow automation",           avatar:"IP", platform:"LinkedIn" },
  { name:"Meera Krishnan",      title:"Co-Founder & COO",            company:"TalentOS",            industry:"HR Tech",                   size:"71 employees",    signal:"Published post on scaling hiring ops",             avatar:"MK", platform:"LinkedIn" },
  { name:"Ethan Cross",         title:"Managing Director",           company:"CrossBridge Capital", industry:"Asset Management",          size:"19 employees",    signal:"Viewed data sovereignty feature page",             avatar:"EC", platform:"LinkedIn" },
  { name:"Amara Diallo",        title:"CEO",                         company:"EduBridge",           industry:"EdTech",                    size:"88 employees",    signal:"Liked 4 posts on AI in education",                avatar:"AD", platform:"LinkedIn" },
  { name:"George Papadopoulos", title:"Founder",                     company:"Papadopoulos Dev",    industry:"Real Estate Dev",           size:"14 employees",    signal:"Downloaded architectural AI render sample",        avatar:"GP", platform:"LinkedIn" },
  { name:"Sana Sheikh",         title:"Chief Operations Officer",    company:"PackRight",           industry:"Packaging & Supply",        size:"430 employees",   signal:"Commented on AI supply chain thread",              avatar:"SS", platform:"LinkedIn" },
  { name:"Ben Harlow",          title:"CRO",                         company:"RevenueEdge",         industry:"Revenue Intelligence",      size:"120 employees",   signal:"Searched for outbound sequence tools",             avatar:"BH", platform:"LinkedIn" },
  { name:"Priyanka Iyer",       title:"Head of Strategy",            company:"Zephyr Consulting",   industry:"Management Consulting",     size:"60 employees",    signal:"Read 3 case studies on AI automation",            avatar:"PI", platform:"LinkedIn" },
  { name:"Mohammed Al-Farsi",   title:"CEO",                         company:"Al-Farsi Group",      industry:"Real Estate & Hospitality", size:"2100 employees",  signal:"Visited brochure AI demo page",                    avatar:"MF", platform:"LinkedIn" },
  { name:"Julia Schneider",     title:"Co-Founder & CEO",            company:"ClimateOS",           industry:"Climate Tech",              size:"53 employees",    signal:"Engaged with AI workflow post",                    avatar:"JS", platform:"LinkedIn" },
  { name:"Kevin Lau",           title:"VP Engineering",              company:"Lattice Systems",     industry:"Enterprise SaaS",           size:"390 employees",   signal:"Forked AI dev automation repo",                    avatar:"KL", platform:"LinkedIn" },
  { name:"Amira Hassan",        title:"Founder",                     company:"CairoTech",           industry:"Tech Consulting",           size:"36 employees",    signal:"Visited self-hosted LLM pricing",                  avatar:"AH", platform:"LinkedIn" },
  { name:"Daniel Osei",         title:"CEO & MD",                    company:"Osei Properties",     industry:"Real Estate",               size:"27 employees",    signal:"Viewed floor plan rendering demo 3×",              avatar:"DO", platform:"LinkedIn" },
  { name:"Yael Cohen",          title:"Chief Revenue Officer",       company:"Placer",              industry:"Location Intelligence",     size:"145 employees",   signal:"Posted on scaling outbound with AI",               avatar:"YC", platform:"LinkedIn" },
  { name:"Tariq Masood",        title:"Managing Partner",            company:"Masood & Partners",   industry:"Law / Legal Services",      size:"48 employees",    signal:"Visited data sovereignty page twice",              avatar:"TM", platform:"LinkedIn" },
  { name:"Elena Vasquez",       title:"CEO",                         company:"CasaVerde",           industry:"PropTech",                  size:"62 employees",    signal:"Downloaded AI real estate brochure sample",        avatar:"EV", platform:"LinkedIn" },
  { name:"Nikhil Gupta",        title:"Co-Founder & CTO",            company:"DeepRoute",           industry:"Autonomous Vehicles",       size:"110 employees",   signal:"Starred LLM private deployment repo",              avatar:"NG", platform:"LinkedIn" },
  { name:"Sophie Laurent",      title:"Head of Partnerships",        company:"Vitesse",             industry:"Payments",                  size:"200 employees",   signal:"Liked post on AI client management",               avatar:"SL", platform:"LinkedIn" },
  { name:"Emeka Obi",           title:"Founder & CEO",               company:"ObiCapital",          industry:"Venture Capital",           size:"9 employees",     signal:"Engaged with AI deal flow post",                   avatar:"EO", platform:"LinkedIn" },
  { name:"Alicia Romero",       title:"COO",                         company:"UrbanNest",           industry:"Residential Real Estate",   size:"83 employees",    signal:"Viewed AI walkthrough video demo",                 avatar:"AR", platform:"LinkedIn" },
  { name:"Ravi Menon",          title:"CEO",                         company:"Menon Analytics",     industry:"Data & Analytics",          size:"55 employees",    signal:"Published post on data ownership concerns",        avatar:"RM", platform:"LinkedIn" },
  { name:"Chloe Dubois",        title:"VP Growth",                   company:"Mova",                industry:"Mobility Tech",             size:"175 employees",   signal:"Searched for automated DM outreach tools",         avatar:"CD", platform:"LinkedIn" },
  { name:"Hassan Al-Amin",      title:"CEO & Co-Founder",            company:"BuildAI",             industry:"Construction AI",           size:"44 employees",    signal:"Visited 5 pages including case studies",           avatar:"HA", platform:"LinkedIn" },
];

// ─── 50 Pre-written Message Pairs ─────────────────────────────────────────────
const MESSAGES = [
  { dm:`PropVault's three visits to your pricing page this week tells me the question isn't whether to invest in AI infrastructure — it's which move to make first. For real estate platforms at your stage, the highest-leverage entry point is usually collateral generation: brochures and walkthroughs that used to take a week, produced in hours. Worth a conversation about what that looks like in your stack? — The anady team`, followup:`Wanted to leave one thought before I move on: PropVault is operating in a market where speed of presentation is a genuine competitive edge. Happy to share a 3-minute breakdown of what we've built for similar platforms.` },
  { dm:`NexaFlow's download of the AI ops whitepaper caught my attention — that's usually the signal of someone who's past the hype and looking for something that actually runs. We build autonomous outbound and workflow systems for SaaS revenue teams. The part that tends to surprise CROs: how fast the first workflow goes live. Open to a quick exchange? — The anady team`, followup:`Still thinking about NexaFlow's ops challenges. One question worth considering: how many hours per week does your team spend on follow-up sequences that a system could own entirely?` },
  { dm:`Seeing Meridian Capital engage with competitor content usually means you're actively evaluating — and I'd rather talk to you before you've made up your mind. We work with investment firms that want AI that stays inside their infrastructure: no data leaving, no third-party training on your deal flow. Five minutes to see if it's relevant? — The anady team`, followup:`Private equity deal flow is exactly the kind of data that should never leave your environment. If data sovereignty is on your radar at Meridian, we've built something worth seeing.` },
  { dm:`Your post on manual ops bottlenecks at LogiTrack resonated — that's exactly the problem we build against. We deploy AI workflow agents that own the repetitive operations layer entirely: scheduling, follow-ups, approvals, reporting. What would it mean for your team if that layer ran without intervention? — The anady team`, followup:`Circling back with one number: operations teams using our workflow agents reclaim an average of 14 hours per person per week. Worth 20 minutes to map that against LogiTrack's current setup?` },
  { dm:`Whitfield Estates viewing the AI brochure case study twice tells me you already know the direction — you're just evaluating the execution. We produce photorealistic property brochures and walkthroughs from floor plans in under 24 hours. For a luxury positioning, the quality bar matters. Happy to send a sample in your property tier. — The anady team`, followup:`Luxury buyers make decisions on emotion before they make them on data. If Whitfield's sales assets aren't triggering that emotion immediately, there's a gap we can close fast.` },
  { dm:`Three likes on workflow automation content in a week is how we usually find the person inside a fintech org who's quietly building the business case. At AfriPay's scale, the highest-ROI workflow to automate first is almost always client onboarding or payment follow-up. Which one is the bigger drag right now? — The anady team`, followup:`Fintech ops at 210 people is an interesting inflection point — enough scale that manual processes are visibly expensive, enough agility to deploy fast. Happy to show you what we'd prioritise.` },
  { dm:`Your comment on AI in construction tells me Construtech is already thinking about this — the question is which applications are worth the investment. For PropTech at your stage, the clearest wins are on the client-facing side: renders, brochures, and project walkthroughs that convert faster. Interested in seeing what that looks like built out? — The anady team`, followup:`One thing I didn't mention: our real estate AI tools are built specifically for developers and contractors, not generic image generators. The output quality is the difference.` },
  { dm:`Searching for outbound automation tools is usually the sign that manual sequences are actively costing pipeline. We build AI agents that run personalised outbound at scale — not templated blasts, but context-aware messages that adapt per lead signal. At ScaleDesk's stage, this tends to 3× reply rates within 60 days. Worth a look? — The anady team`, followup:`The difference between what we build and standard automation: our agents read behavioural signals and adjust the message. Happy to run a live demo for your team.` },
  { dm:`Pillar Ventures viewing portfolio company profiles is the kind of signal that makes me think you're either assessing current ops or evaluating new bets. Either way, we work with VC firms that want AI that runs internally — deal flow analysis, portfolio monitoring, LP comms — without touching public infrastructure. Worth 15 minutes? — The anady team`, followup:`One thing relevant to Pillar: we've helped investment firms build private LLM infrastructure that turns their deal history into an active intelligence asset. That's a durable edge.` },
  { dm:`Your article on ops efficiency at HealthBridge was precise in the right places — you clearly know where the drag lives. We build AI systems that take ownership of the ops layer that shouldn't require your team's attention: scheduling, triage, documentation, follow-ups. What would a 30% ops efficiency gain look like at 450 people? — The anady team`, followup:`HealthTech ops is one of the highest-stakes places to deploy AI — compliance, data sensitivity, workflow complexity. We've built specifically for that environment. Happy to walk through how.` },
  { dm:`Four pages on AI rendering in one session is a strong signal that DuneBuilders is ready to move from curiosity to execution. We produce architectural renders and property walkthroughs from briefs or floor plans — in hours, not weeks. For a developer at your scale in this market, faster visual output directly accelerates pre-sales. Shall I send a sample? — The anady team`, followup:`Dubai's real estate market moves on presentation quality. If DuneBuilders' collateral isn't the sharpest thing a buyer sees this week, we should talk.` },
  { dm:`Opening an email about AI sales sequences tells me the problem is real and the urgency is building. We build autonomous outbound agents for sales teams — not email blasts, but personalised sequences that read lead behaviour and adjust accordingly. ClearPipeline's team could have this running on your existing leads within two weeks. Open to a demo? — The anady team`, followup:`One thing worth knowing: our outbound agents don't just send messages — they schedule, follow up, and escalate based on engagement signals. Your team only steps in when a lead is warm.` },
  { dm:`Your question about data privacy in AI tools is exactly the right question to be asking. We build self-hosted LLM infrastructure — models that run inside your environment, trained on your firm's knowledge, with zero data leaving. For legal, that's not a nice-to-have. It's the only viable option. Worth a conversation? — The anady team`, followup:`Webb Legal's client data is arguably the most sensitive kind. We've built private AI deployments specifically for law firms that need the capability without the exposure.` },
  { dm:`Sharing content on autonomous ops at GlobalRoute's scale means you're past the question of whether this is real — you're evaluating where to start. At 880 people, the highest-impact first deployment is usually cross-team workflow orchestration: reducing the handoffs that slow execution at scale. We've built this. Want to see the architecture? — The anady team`, followup:`Logistics at enterprise scale has a specific bottleneck pattern — it's almost always in the middle layer between systems. That's exactly where our workflow agents operate.` },
  { dm:`Starring an LLM infrastructure repo as a CTO tells me BuildStack is evaluating private AI deployment seriously. We do the build — self-hosted models, fine-tuned on your codebase and ops data, running inside your infrastructure. No vendor lock-in, no data leaving. Happy to talk architecture with your team. — The anady team`, followup:`The difference between hosting your own LLM and using a hosted API isn't just privacy — it's control, latency, and cost at scale. Happy to share what we've built for teams at your stage.` },
  { dm:`Your post on scaling customer onboarding at Momentify caught my attention — that's one of the workflows where AI makes the biggest immediate difference. We build onboarding automation that adapts to each customer's profile and progress, reducing time-to-value without adding headcount. Worth a 20-minute look? — The anady team`, followup:`Onboarding is where churn is actually decided — most teams just don't see it until it's too late. Our agents keep every customer on the critical path automatically.` },
  { dm:`Downloading a floor plan AI demo at Apex Properties is a good first step. The next one is seeing what the output looks like at commercial real estate quality. We generate photorealistic renders, walkthroughs, and full brochure sets from floor plans — at a standard your clients will notice. Want me to run your most recent project through it? — The anady team`, followup:`Commercial real estate collateral has a very specific quality bar. Happy to send a sample rendered in your property category so you can judge for yourself.` },
  { dm:`Your comment on the no-code AI thread signals that FlowOps is looking for deployment speed, not complexity. We build workflow automation that goes live in days — pre-built agents for outbound, scheduling, onboarding, and ops, configured to your processes. No engineering sprint required. Is there a specific workflow that's most urgent right now? — The anady team`, followup:`The fastest path to ROI on AI is almost never a custom build from scratch. We've already built the agents — we just configure them to FlowOps' workflows.` },
  { dm:`Attending an AI in finance webinar usually means Kredify is past awareness and into evaluation. We work with lending platforms that want AI running their ops and outreach — client qualification, follow-up sequences, document processing — without touching public cloud infrastructure. The compliance angle matters here. Worth talking? — The anady team`, followup:`Lending is one of the sectors where private AI deployment isn't optional — it's a regulatory and trust requirement. We've built for that constraint specifically.` },
  { dm:`Liking content on patient workflow automation at MedCore's scale tells me someone's building a business case internally. We build AI systems for healthcare ops teams — scheduling, triage routing, follow-up communications — that run inside your infrastructure with full data controls. Would it be useful to see a healthcare-specific implementation? — The anady team`, followup:`Patient data is the one category where deployment environment is non-negotiable. Our self-hosted approach means MedCore gets the capability with none of the exposure.` },
  { dm:`Visiting the self-hosted LLM page twice in a short window tells me HargreavesLaw is evaluating this seriously. For a law firm, the value proposition is direct: a private AI that knows your firm's precedents, documents, and client history — trained internally, accessible only to your team. Shall we walk through what that looks like built out? — The anady team`, followup:`Legal AI is only useful if the output is trustworthy and the data is protected. We've built private LLM infrastructure specifically for law firms that need both.` },
  { dm:`Searching for AI-driven DM tools is usually the moment right before a team commits to either building something or buying something. We've already built it. Personalised outbound agents that read lead signals, craft context-aware messages, and schedule follow-ups — running continuously without your team's involvement. PulseRetail's acquisition pipeline could be running on this within two weeks. — The anady team`, followup:`Retail customer acquisition has a specific rhythm — high volume, time-sensitive signals, fast drop-off. Our outbound agents are built to operate at that speed.` },
  { dm:`Five AI industry engagements in a week at Bajaj Infra's scale tells me this is moving from curiosity to board-level conversation. We build AI infrastructure for large organisations — private LLM deployment, workflow automation at scale, and autonomous ops layers that reduce the headcount required to run complex operations. Worth a senior-level conversation? — The anady team`, followup:`At 1200 people, the ROI on AI workflow automation compounds in a way that's hard to appreciate without the numbers. Happy to model what that looks like for Bajaj Infra's operations.` },
  { dm:`Your repost on AI ops at Gridline tells me you're either building the internal case or already have buy-in and need an execution partner. We deploy autonomous workflow systems for energy tech companies — ops that run without intervention, data that stays inside your infrastructure. What's the workflow consuming the most bandwidth right now? — The anady team`, followup:`Energy tech has unique data sensitivity requirements that most AI vendors don't accommodate. Our private deployment model was built for exactly that constraint.` },
  { dm:`Viewing competitor pricing four times in a short window tells me AdFinance is in active evaluation. Before you decide, it's worth seeing what we do differently: private LLM deployment, autonomous ops workflows, and outbound agents — all built to stay inside your infrastructure. At 45 people, you can move fast on this. Want a direct comparison? — The anady team`, followup:`The most important question to ask any AI vendor: where does your data go? We can answer that clearly, and it changes the evaluation.` },
  { dm:`Starring an AI PR automation repo as a Founder-CTO tells me you've already validated the concept — now it's about the build quality and the time to production. We've built autonomous PR-raising infrastructure that integrates with your CI pipeline and ships features without human intervention. DevPilot could have this running in your stack within a sprint. Worth seeing? — The anady team`, followup:`The gap between a prototype and a production-grade autonomous dev workflow is significant. We've already crossed it — happy to show you what's running.` },
  { dm:`Your post on manual follow-up problems at SkyMed tells me this is a real cost, not a hypothetical one. We build AI agents that own the entire follow-up sequence — initial outreach, timed nudges, escalation triggers — running continuously without your sales team's involvement. At 310 people, this reclaims significant capacity. Want to see the numbers from a similar deployment? — The anady team`, followup:`MedTech sales cycles are long and follow-up-dependent. Our agents are built to operate on that cadence — persistent, personalised, and running without manual input.` },
  { dm:`Three email opens on workflow automation content tells me the message is landing but the timing hasn't been right. Here's a direct question for BalticLogistics: what's the single operation that, if fully automated, would have the biggest impact on your margins this year? That's usually where we start. — The anady team`, followup:`Freight and logistics operations have a specific automation profile — high volume, repeatable workflows, time-critical handoffs. We've built agents that run exactly that layer.` },
  { dm:`Your post on scaling hiring ops at TalentOS signals that growth is happening faster than your infrastructure can support it. We build onboarding and ops automation for HR tech companies — workflows that handle the repetitive layer of scaling a team without adding headcount to manage the headcount. Sounds like the right moment to talk. — The anady team`, followup:`Scaling a hiring operation manually past a certain point creates its own drag. Our automation layer removes that ceiling without requiring a larger ops team.` },
  { dm:`Viewing the data sovereignty feature page at CrossBridge Capital tells me you already understand the core issue. For an asset manager, the question isn't whether to use AI — it's whether you can use it without your investment data training someone else's model. We build private LLM infrastructure that ensures you can't. Worth 15 minutes to walk through the architecture? — The anady team`, followup:`Asset management data is among the most strategically sensitive information a firm holds. We've built infrastructure specifically so that using AI doesn't mean giving that up.` },
  { dm:`Your engagement with AI in education content at EduBridge suggests you're looking at this seriously. We work with EdTech platforms to build workflow automation for the ops side — student onboarding, instructor communications, progress tracking, support triage — so your team can focus on the product, not the process. What's the biggest ops drag right now? — The anady team`, followup:`EdTech operations scale in a non-linear way — one curriculum, many cohorts, enormous coordination overhead. That's exactly the problem our workflow agents are built to absorb.` },
  { dm:`Downloading an architectural AI render sample tells me Papadopoulos Dev is evaluating this for real projects, not curiosity. We produce photorealistic renders and full property brochures from floor plans or sketches — quality that converts at the presale stage. For a developer at your scale, this changes the economics of your marketing spend significantly. Want to run a live project through it? — The anady team`, followup:`Presale conversion in real estate development depends almost entirely on how real the property feels before it exists. AI rendering at the quality we produce changes that conversation.` },
  { dm:`Your comment on AI supply chain threads at PackRight's scale tells me this is moving from observation to operational decision. We build workflow automation for supply chain and packaging operations — inventory triggers, supplier communications, order processing, exception handling — running continuously without manual intervention. At 430 people, the compounding effect is significant. — The anady team`, followup:`Supply chain automation at scale has one defining characteristic: the ROI is proportional to volume, not headcount. Happy to model that for PackRight's current throughput.` },
  { dm:`Searching for outbound sequence tools tells me RevenueEdge is feeling the gap between current output and pipeline potential. We build AI outbound agents that close that gap — personalised messages based on lead signals, automatic follow-up cadences, escalation triggers when engagement spikes. Your team focuses on calls; the agent handles everything before it. — The anady team`, followup:`Revenue teams using our outbound agents typically see the first qualified responses within 72 hours of deployment. Happy to walk through how we'd configure this for RevenueEdge's lead profile.` },
  { dm:`Reading three AI automation case studies at Zephyr Consulting tells me you're building the picture of what good looks like before you recommend it to clients. We've built AI workflow and LLM deployment systems across industries — happy to share implementation details that would sharpen your perspective, with no obligation attached. — The anady team`, followup:`If Zephyr is starting to see client demand for AI implementation guidance, we're open to a partnership conversation as well as a direct one.` },
  { dm:`Al-Farsi Group visiting the brochure AI demo page signals that you understand the value — you're just calibrating against the quality bar your properties demand. We produce renders and brochures at the level that luxury hospitality and high-end real estate expects. I'd rather show you than describe it. Can I send a sample in your property category? — The anady team`, followup:`At Al-Farsi Group's scale and positioning, the quality of sales collateral is a direct signal of the quality of the asset. We build to that standard.` },
  { dm:`Your engagement with AI workflow content at ClimateOS suggests you're looking at operational infrastructure, not just product. We build autonomous workflow systems for climate tech companies — grant reporting, stakeholder communications, project milestone tracking — running without your team's manual involvement. For a 53-person team, that's significant leverage. — The anady team`, followup:`Climate tech companies often have the most complex stakeholder reporting requirements with the smallest ops teams. Our workflow agents are built to close that gap.` },
  { dm:`Forking an AI dev automation repo as a VP Engineering tells me Lattice Systems is evaluating autonomous development workflows seriously. We've built production-grade PR-raising infrastructure — agents that write, test, and ship features against a spec, integrated into your existing CI/CD pipeline. Happy to walk your engineering team through the architecture. — The anady team`, followup:`The question for most engineering teams isn't whether autonomous dev workflows are possible — it's whether the output quality meets production standards. We've solved that. Happy to demonstrate.` },
  { dm:`Visiting self-hosted LLM pricing at CairoTech tells me you're evaluating this for a client or for the firm itself. Either way, we build private LLM infrastructure that stays entirely within your environment — trained on your knowledge base, accessible only to your team, no third-party data exposure. For a consulting firm, that's a durable capability advantage. — The anady team`, followup:`A consulting firm with its own private AI that knows its methodologies, client history, and frameworks has a compounding advantage over time. That's what we build.` },
  { dm:`Three views of the floor plan rendering demo at Osei Properties tells me the quality question is already answered — now it's about fit and timeline. We work with residential developers to produce full sales collateral packages from floor plans: renders, walkthroughs, brochures. Turnaround is 24–48 hours. For your next project launch, what would that change? — The anady team`, followup:`Real estate developers who move first with AI-quality visuals are setting a standard their competitors are scrambling to match. Happy to show you the gap on a live project.` },
  { dm:`Your post on scaling outbound with AI at Placer tells me you've already done the analysis — you know what the problem costs. We build AI outbound agents that scale personalised prospecting without scaling your team. The signal-reading capability is what separates it from automation: every message adjusts based on what the lead actually did. Want to see it running? — The anady team`, followup:`Location intelligence sales cycles depend on reaching the right person at the right moment of intent. Our agents are built to identify and act on exactly that signal.` },
  { dm:`Visiting the data sovereignty page twice at Masood & Partners tells me you're doing proper due diligence. For a law firm, the answer you need is simple: with our self-hosted LLM deployment, your client data, case notes, and firm knowledge never leave your infrastructure. Not to our servers. Not to anyone's model. It's yours, running your AI. Shall we walk through the technical setup? — The anady team`, followup:`Law firm AI adoption has stalled largely because the data question hasn't been answered satisfactorily. We've answered it. Happy to demonstrate.` },
  { dm:`Downloading an AI real estate brochure sample at CasaVerde tells me you're evaluating this for active projects, not future ones. We turn floor plans and property briefs into full sales collateral — renders, walkthroughs, brochures — in 24 to 48 hours, at quality that converts at the presale stage. Which project would you want to run through this first? — The anady team`, followup:`PropTech buyers are increasingly making decisions based on visual experience before site visits. CasaVerde's collateral quality is part of the product. We can elevate it immediately.` },
  { dm:`Starring a private LLM deployment repo as a CTO tells me DeepRoute is evaluating infrastructure options seriously. We build and deploy self-hosted LLMs for organisations where data sensitivity is non-negotiable — fine-tuned on your internal data, running inside your environment, integrated with your existing systems. Autonomous vehicle data is exactly the kind that should never be on a shared API. — The anady team`, followup:`The technical architecture for private LLM deployment at a scale like DeepRoute's is non-trivial. Happy to connect your engineering team with ours for a direct conversation.` },
  { dm:`Liking content on AI client management at Vitesse tells me you're thinking about the relationship layer, not just the product layer. We build AI systems that manage client communications, follow-ups, and account health monitoring automatically — so your partnerships team focuses on the conversations that actually need them. For a payments company, that's a significant retention lever. — The anady team`, followup:`Client retention in payments is almost entirely a function of proactive communication. Our AI agents handle that layer continuously, without your team's manual involvement.` },
  { dm:`Your engagement with AI deal flow content at ObiCapital tells me you're thinking about how to run a lean, high-conviction firm without missing signal. We build private AI infrastructure for venture firms — deal screening, portfolio monitoring, LP reporting — running inside your environment with no data exposure. For a 9-person team, this is the leverage that changes the equation. — The anady team`, followup:`A small VC firm with the right AI infrastructure can operate with the analytical capability of a team three times its size. That's exactly what we build for.` },
  { dm:`Viewing the AI walkthrough video demo at UrbanNest tells me the concept is clear — now you're evaluating execution quality. We produce property walkthroughs from floor plans that convert at the presale stage: photorealistic, navigable, and ready in 48 hours. For a residential developer, this is the difference between preselling and launching to uncertainty. Want me to run a live sample? — The anady team`, followup:`Buyers form emotional attachment to a property through visual experience, not floor plans. Our walkthroughs create that experience before construction begins.` },
  { dm:`Publishing about data ownership concerns at Menon Analytics tells me you're asking the right question before making the wrong decision. We build self-hosted LLM infrastructure where data ownership is structural, not contractual — your models, your compute, your data, full stop. For an analytics firm, your proprietary datasets are the business. They shouldn't train anyone else's model. — The anady team`, followup:`Data analytics firms have the most to lose from public AI infrastructure and the most to gain from private deployment. Happy to walk through what that architecture looks like for Menon.` },
  { dm:`Searching for automated DM outreach tools at Mova tells me the growth team is ready to scale prospecting beyond what manual processes allow. We build AI outbound agents that read behavioural signals and craft personalised messages at scale — not templates, but context-aware outreach that adjusts per lead. For a mobility platform, first-mover speed matters. Want to see it live? — The anady team`, followup:`Mobility tech outreach has a narrow timing window — the right message at the wrong moment doesn't convert. Our agents are built to identify and act on the right moment automatically.` },
  { dm:`Visiting five pages including case studies at BuildAI tells me you're past awareness and into serious evaluation. We build AI workflow infrastructure, private LLM deployments, and autonomous dev systems — and we've done it across construction, real estate, and tech. At 44 people, you can move fast and the impact is immediate. What's the most urgent problem right now? — The anady team`, followup:`Construction AI is one of the fastest-moving categories right now. The firms that deploy in the next 12 months will have a meaningful head start. Happy to talk about what that looks like for BuildAI.` },
];

// ─── Helpers ──────────────────────────────────────────────────────────────────
const sleep = ms => new Promise(r => setTimeout(r, ms));
const STAGE_ORDER = ["scanning","profiling","drafting","sent","followup"];
const isDone = (cur, chk) => STAGE_ORDER.indexOf(cur) > STAGE_ORDER.indexOf(chk);
const STAGE_LABELS = {
  scanning:  "Scanning signals...",
  profiling: "Building lead profile...",
  drafting:  "Drafting message...",
  sent:      "Message sent.",
  followup:  "Scheduling follow-up...",
};

// ─── Typewriter Hook ──────────────────────────────────────────────────────────
function useTypewriter(text, speed = 14, active = false) {
  const [displayed, setDisplayed] = useState("");
  const [done, setDone]           = useState(false);
  const idx   = useRef(0);
  const timer = useRef(null);
  useEffect(() => {
    if (!active || !text) return;
    setDisplayed(""); setDone(false); idx.current = 0;
    clearInterval(timer.current);
    timer.current = setInterval(() => {
      idx.current++;
      setDisplayed(text.slice(0, idx.current));
      if (idx.current >= text.length) { clearInterval(timer.current); setDone(true); }
    }, speed);
    return () => clearInterval(timer.current);
  }, [text, active, speed]);
  return { displayed, done };
}

// ─── Sub-components ───────────────────────────────────────────────────────────
function MetaRow({ label, value }) {
  return (
    <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:"10px" }}>
      <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:"9px", letterSpacing:"0.08em", color:T.greyMid, paddingTop:"1px", flexShrink:0, marginRight:"12px" }}>{label}</span>
      <span style={{ fontSize:"11px", color:T.greyLight, textAlign:"right", lineHeight:1.4 }}>{value}</span>
    </div>
  );
}

function StageStep({ label, active, done }) {
  return (
    <div style={{ display:"flex", alignItems:"center", gap:"10px", fontSize:"10px", fontFamily:"'JetBrains Mono',monospace", letterSpacing:"0.04em", color: done?T.accent:active?T.offWhite:T.greyDim, transition:"color 0.4s" }}>
      <span style={{ width:"5px", height:"5px", borderRadius:"50%", flexShrink:0, display:"inline-block", background: done?T.accent:active?T.offWhite:T.greyDim, boxShadow: active?`0 0 7px ${T.offWhite}88`:"none", transition:"all 0.4s" }} />
      {label}
    </div>
  );
}

function TermLine({ text, delay=0, isAccent=false }) {
  const [v, setV] = useState(false);
  useEffect(() => { const t = setTimeout(() => setV(true), delay); return () => clearTimeout(t); }, [delay]);
  return (
    <div style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:"11px", lineHeight:1.7, color:isAccent?T.accent:T.greyLight, opacity:v?1:0, transform:v?"none":"translateY(3px)", transition:"opacity 0.25s, transform 0.25s", marginBottom:"2px" }}>
      {text||"\u00A0"}
    </div>
  );
}

function Stat({ n, label }) {
  return (
    <div style={{ flex:1, padding:"22px 16px", borderRight:`1px solid ${T.greyRule}`, textAlign:"center" }}>
      <div style={{ fontFamily:"'Cormorant Garamond',serif", fontSize:"32px", color:T.offWhite, marginBottom:"5px", letterSpacing:"-0.02em" }}>{n}</div>
      <div style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:"8px", color:T.greyMid, letterSpacing:"0.12em", textTransform:"uppercase", lineHeight:1.7 }}>{label}</div>
    </div>
  );
}

function PulseDot() {
  return <span style={{ display:"inline-block", width:"8px", height:"8px", borderRadius:"50%", background:T.greyMid, marginRight:"8px", animation:"pulseDot 1.1s ease-in-out infinite" }} />;
}

// ─── Main ─────────────────────────────────────────────────────────────────────
function DMExperience() {
  const [stage, setStage]         = useState("idle");
  const [leadIdx, setLeadIdx]     = useState(0);
  const [activePair, setActivePair] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [hasRun, setHasRun]       = useState(false);

  const lead = LEADS[leadIdx % LEADS.length];
  const pair = activePair || { dm:"", followup:"" };

  const dmTw = useTypewriter(pair.dm,       13, stage==="drafting" && !!pair.dm);
  const fuTw = useTypewriter(pair.followup, 16, stage==="followup" && !!pair.followup);

  const runSequence = useCallback(async () => {
    if (isLoading) return;
    setIsLoading(true);
    setHasRun(true);
    setActivePair(null);

    const chosen = MESSAGES[leadIdx % MESSAGES.length];

    setStage("scanning");  await sleep(1500);
    setStage("profiling"); await sleep(1300);
    setStage("drafting");
    setActivePair(chosen);
    await sleep(chosen.dm.length * 13 + 1000);
    setStage("sent");      await sleep(1100);
    setStage("followup");
    await sleep(chosen.followup.length * 16 + 700);

    setIsLoading(false);
  }, [isLoading, leadIdx]);

  const nextLead = () => {
    if (isLoading) return;
    setLeadIdx(i => i + 1);
    setStage("idle");
    setActivePair(null);
  };

  const showCTA = stage === "followup" && fuTw.done;

  return (
    <>
      <style>{`
        *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
        @keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0} }
        @keyframes pulse    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.75)} }
        @keyframes spin     { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
        @keyframes flicker  { 0%,100%{opacity:1} 50%{opacity:0.25} }
        @keyframes pulseDot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.7);opacity:0.35} }
        @keyframes fadeUp   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
        @keyframes fadeIn   { from{opacity:0} to{opacity:1} }
        .run-btn:hover:not(:disabled)    { opacity:0.82 !important; }
        .switch-btn:hover:not(:disabled) { border-color:${T.greyLight} !important; color:${T.offWhite} !important; }
        .cta-link:hover                  { background:${T.offWhite} !important; color:${T.black} !important; }
        ::-webkit-scrollbar { display:none; }
      `}</style>

      <div style={{ background:T.black, color:T.offWhite, fontFamily:"'DM Sans',sans-serif", padding:"0 24px", display:"flex", flexDirection:"column", gap:"32px", width:"100%" }}>

        {/* Header */}
        <div style={{ textAlign:"center", animation:"fadeUp 0.7s ease both" }}>
          <span style={{ display:"inline-block", fontFamily:"'JetBrains Mono',monospace", fontSize:"9px", letterSpacing:"0.26em", color:T.accent, border:`1px solid ${T.accent}55`, padding:"5px 14px", marginBottom:"20px" }}>
            WORKFLOW DEMO · AI OUTBOUND
          </span>
          <h2 style={{ fontFamily:"'Cormorant Garamond',serif", fontSize:"clamp(30px,3.6vw,48px)", fontWeight:400, letterSpacing:"-0.02em", marginBottom:"12px", lineHeight:1.1 }}>
            Watch the agent work.
          </h2>
          <p style={{ fontSize:"14px", color:T.greyMid, maxWidth:"420px", margin:"0 auto", lineHeight:1.7 }}>
            A real outbound DM — written, personalised, and queued in under 8 seconds. No human touched this.
          </p>
        </div>

        {/* Panel */}
        <div style={{ display:"grid", gridTemplateColumns:"minmax(0,1fr) minmax(0,1.65fr)", gap:"1px", background:T.greyRule, maxWidth:"1080px", width:"100%", margin:"0 auto", border:`1px solid ${T.greyRule}`, animation:"fadeUp 0.8s 0.1s ease both", height:"520px" }}>

          {/* Left — Lead */}
          <div style={{ background:T.black, padding:"24px", display:"flex", flexDirection:"column", gap:"14px", minHeight:0 }}>
            <div style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:"8px", letterSpacing:"0.24em", color:T.greyMid }}>LEAD PROFILE</div>
            <div style={{ border:`1px solid ${T.greyRule}`, padding:"20px", flex:1, display:"flex", flexDirection:"column" }}>
              <div style={{ display:"flex", alignItems:"center", gap:"13px", marginBottom:"16px" }}>
                <div style={{ width:"40px", height:"40px", background:T.greyDim, display:"flex", alignItems:"center", justifyContent:"center", fontFamily:"'JetBrains Mono',monospace", fontSize:"10px", color:T.greyLight, flexShrink:0, letterSpacing:"0.05em" }}>
                  {lead.avatar}
                </div>
                <div>
                  <div style={{ fontSize:"13px", fontWeight:500, color:T.offWhite, marginBottom:"3px" }}>{lead.name}</div>
                  <div style={{ fontSize:"10px", color:T.greyMid, lineHeight:1.5 }}>{lead.title}</div>
                </div>
              </div>
              <div style={{ height:"1px", background:T.greyRule, margin:"0 0 14px" }} />
              <MetaRow label="COMPANY"  value={lead.company}  />
              <MetaRow label="INDUSTRY" value={lead.industry} />
              <MetaRow label="SIZE"     value={lead.size}     />
              <MetaRow label="PLATFORM" value={lead.platform} />
              <div style={{ display:"flex", alignItems:"flex-start", gap:"9px", background:"#0E0E0E", border:`1px solid #1C1C1C`, padding:"11px 13px", marginTop:"10px" }}>
                <span style={{ width:"5px", height:"5px", borderRadius:"50%", background:T.accent, marginTop:"5px", flexShrink:0, display:"inline-block", animation:"pulse 2.2s infinite" }} />
                <span style={{ fontSize:"10px", color:T.greyLight, lineHeight:1.65, fontStyle:"italic" }}>{lead.signal}</span>
              </div>
            </div>
            <button className="switch-btn" onClick={nextLead} disabled={isLoading}
              style={{ background:"transparent", border:`1px solid ${T.greyDim}`, color:T.greyMid, padding:"10px 16px", fontSize:"9px", fontFamily:"'JetBrains Mono',monospace", letterSpacing:"0.12em", cursor:isLoading?"not-allowed":"pointer", transition:"all 0.3s", width:"100%" }}>
              ↓ NEXT LEAD
            </button>
          </div>

          {/* Right — Output */}
          <div style={{ background:"#0C0C0C", padding:"24px", display:"flex", flexDirection:"column", gap:"14px", minHeight:0 }}>
            <div style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:"8px", letterSpacing:"0.24em", color:T.greyMid }}>AGENT OUTPUT</div>

            {/* Stage tracker */}
            <div style={{ display:"flex", flexDirection:"column", gap:"9px", padding:"13px 15px", background:"#070707", border:`1px solid ${T.greyRule}` }}>
              {Object.entries(STAGE_LABELS).map(([key,label]) => (
                <StageStep key={key} label={label} active={stage===key} done={isDone(stage,key)} />
              ))}
            </div>

            {/* Output area */}
            {/* Output area — fixed height, internal scroll so content never reflows layout */}
            <div style={{ flex:1, minHeight:0, border:`1px solid ${T.greyRule}`, padding:"18px 20px", display:"flex", flexDirection:"column", gap:"14px", overflowY:"auto", overflowX:"hidden" }}>

              {stage==="idle" && !hasRun && (
                <div style={{ display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", height:"100%", gap:"10px", opacity:0.3 }}>
                  <div style={{ fontSize:"26px", color:T.greyMid, animation:"spin 9s linear infinite" }}>◎</div>
                  <div style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:"10px", color:T.greyMid, letterSpacing:"0.14em" }}>Agent standing by.</div>
                  <div style={{ fontSize:"10px", color:T.greyDim }}>Hit run to watch it work.</div>
                </div>
              )}

              {stage==="scanning" && (
                <div>
                  {[
                    { t:`Checking LinkedIn — @${lead.name.split(" ")[0].toLowerCase()}`,    d:0,    a:false },
                    { t:`Signal: "${lead.signal}"`,                                          d:280,  a:false },
                    { t:`Verifying: ${lead.company} · ${lead.industry}`,                    d:520,  a:false },
                    { t:`Enriching with industry context...`,                                d:740,  a:false },
                    { t:`Lead score: 94 / 100  ✓`,                                          d:1000, a:true  },
                  ].map((l,i) => <TermLine key={i} text={l.t} delay={l.d} isAccent={l.a} />)}
                </div>
              )}

              {stage==="profiling" && (
                <div>
                  {[
                    { t:`Name:     ${lead.name}`,                             d:0,   a:false },
                    { t:`Role:     ${lead.title} @ ${lead.company}`,          d:110, a:false },
                    { t:`Industry: ${lead.industry} · ${lead.size}`,          d:200, a:false },
                    { t:`Platform: ${lead.platform}`,                         d:280, a:false },
                    { t:`Signal:   ${lead.signal}`,                           d:360, a:false },
                    { t:``,                                                   d:420, a:false },
                    { t:`→ Tone: peer-to-peer, confident`,                    d:480, a:true  },
                    { t:`→ Hooks: seniority, signal, industry fit`,           d:580, a:true  },
                    { t:`→ Generating message...`,                            d:700, a:true  },
                  ].map((l,i) => <TermLine key={i} text={l.t} delay={l.d} isAccent={l.a} />)}
                </div>
              )}

              {(stage==="drafting"||stage==="sent"||stage==="followup") && pair.dm && (
                <div>
                  <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:"13px" }}>
                    <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:"8px", color:T.greyMid, letterSpacing:"0.1em" }}>LinkedIn DM → {lead.name}</span>
                    {stage==="sent"||stage==="followup"
                      ? <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:"8px", color:T.accent, letterSpacing:"0.1em" }}>✓ SENT</span>
                      : <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:"8px", color:T.offWhite, letterSpacing:"0.1em", animation:"flicker 1s infinite" }}>writing...</span>
                    }
                  </div>
                  <div style={{ fontSize:"13px", lineHeight:1.9, color:T.offWhite, letterSpacing:"0.01em" }}>
                    {dmTw.displayed}
                    {stage==="drafting" && <span style={{ animation:"blink 0.65s step-end infinite", color:T.accent }}>|</span>}
                  </div>
                </div>
              )}

              {stage==="followup" && pair.followup && (
                <div style={{ borderTop:`1px solid ${T.greyRule}`, paddingTop:"14px", animation:"fadeIn 0.4s ease" }}>
                  <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:"10px" }}>
                    <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:"8px", color:T.greyMid, letterSpacing:"0.1em" }}>Follow-up · T+5 days</span>
                    <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:"8px", color:T.greyLight, letterSpacing:"0.08em" }}>⏱ Scheduled</span>
                  </div>
                  <div style={{ fontSize:"12px", lineHeight:1.85, color:T.greyLight, fontStyle:"italic" }}>
                    {fuTw.displayed}
                    {!fuTw.done && <span style={{ animation:"blink 0.65s step-end infinite", color:T.accent }}>|</span>}
                  </div>
                </div>
              )}
            </div>

            {/* Run button */}
            <button className="run-btn" onClick={runSequence} disabled={isLoading}
              style={{ display:"flex", alignItems:"center", justifyContent:"center", gap:"8px", background:isLoading?T.greyDim:T.offWhite, color:isLoading?T.greyLight:T.black, border:"none", padding:"14px 28px", fontSize:"10px", fontFamily:"'JetBrains Mono',monospace", letterSpacing:"0.16em", cursor:isLoading?"not-allowed":"pointer", transition:"all 0.35s", fontWeight:600, width:"100%" }}>
              {isLoading ? <><PulseDot />RUNNING AGENT</> : showCTA ? "↺ RUN AGAIN" : "▶ RUN AGENT"}
            </button>
          </div>
        </div>

        {/* Stat strip */}
        <div style={{ display:"flex", maxWidth:"1080px", width:"100%", margin:"0 auto", border:`1px solid ${T.greyRule}` }}>
          <Stat n="∞"    label="Leads / day"         />
          <Stat n="8s"   label="Per DM crafted"       />
          <Stat n="0"    label="Humans in the loop"   />
          <Stat n="3.2×" label="Reply rate vs manual" />
        </div>
      </div>
    </>
  );
}

// ─── Mount ────────────────────────────────────────────────────────────────────
(function mountDMExperience(){
  const node = document.getElementById("dm-experience-root");
  if (!node) return;
  const root = ReactDOM.createRoot(node);
  root.render(React.createElement(DMExperience));
})();
