import { useState } from "react";

const experts = [
  {
    id: 1, name: "Mor Assouline", niche: "SaaS Sales Demo Coaching", tier: "accessible", location: "Fort Lauderdale, FL (AZ ties)",
    skool: true, skoolNote: "Has Skool profile + DTC University community",
    why: "Former 3X VP of Sales for SaaS startups. Founded FDTC (From Demo To Close). $3,995/yr coaching program. Trained reps at ZoomInfo, HubSpot, Zendesk, Dialpad. Featured on ShoutOut Arizona. His frameworks are hyper-specific and playbook-ready.",
    audience: "Strong LinkedIn, podcast (SaaS Talks), growing brand", revenue: "$300K–$800K",
    frameworks: "From Demo To Close system, Sales Cocktail swipe file, Discovery → Demo → Close framework, Unselling method, Buyer Persona + Buying Scenario",
    playbook: "His Demo-to-Close framework as an interactive playbook — AEs walk through discovery, demo structure, and follow-up with AI-assisted practice.",
    links: {
      linkedin: "https://www.linkedin.com/in/morassouline/",
      x: "https://x.com/mistamor",
      instagram: "https://www.instagram.com/fromdemotoclose/",
      skool: "https://www.skool.com/@mor-assouline-6342",
      website: "https://www.fdtcuniversity.com/"
    }
  },
  {
    id: 2, name: "Alex Berman", niche: "Cold Email / B2B Lead Gen for Agencies", tier: "mid", location: "Remote / US",
    skool: false, skoolNote: "Recommends Skool on his tools page. Uses Teachable.",
    why: "Author of 'The Cold Email Manifesto.' 90K+ YouTube. Built and exited 5 SaaS companies. Runs Galadon mastermind. 14K+ clients served. His 3Cs method is simple, teachable, perfect for playbooks.",
    audience: "90K YouTube, strong LinkedIn", revenue: "$1–3M",
    frameworks: "3Cs Method (Compliment, Case Study, CTA), The Baking Method (year-long follow-up), 50 Cold Email Scripts, Email10K program",
    playbook: "His 3Cs cold email method + The Baking Method as an interactive outreach playbook with AI personalization.",
    links: {
      linkedin: "https://www.linkedin.com/in/alexanderberman",
      youtube: "https://www.youtube.com/@Alex_Berman",
      website: "https://alexberman.com/",
      teachable: "https://alexberman.teachable.com/"
    }
  },
  {
    id: 3, name: "Chris Orlob", niche: "SaaS Sales Discovery / Enterprise Selling", tier: "mid", location: "US",
    skool: false, skoolNote: "No Skool. Runs pclub.io platform + Slack community.",
    why: "Former VP of Revenue at Gong ($200K to $200M+ ARR). Founded pclub.io. 11K+ sales professionals trained. Sells $25K masterclasses. Extremely framework-rich, data-backed.",
    audience: "100K+ LinkedIn, YouTube, TikTok, X", revenue: "$1–5M",
    frameworks: "Discovery Masterclass, SPICED framework, Creating Urgency system, Socratic Questioning Sequence, Closing Motion Strategies",
    playbook: "His data-backed discovery framework — interactive playbook showing reps exactly which questions to ask and when.",
    links: {
      linkedin: "https://www.linkedin.com/in/chrisorlob/",
      website: "https://www.pclub.io/"
    }
  },
  {
    id: 4, name: "Nikki Rausch", niche: "Relationship-Based Sales / The Selling Staircase", tier: "accessible", location: "Pacific Northwest",
    skool: false, skoolNote: "No Skool. Runs Sales Maven Society membership.",
    why: "25+ years sales experience (Gates Foundation, HP, NASA). 'Sales Maven' brand. Her Selling Staircase is a clean 5-step framework PERFECT for playbook conversion. Anti-pushy, relationship-first. Very accessible.",
    audience: "LinkedIn, podcast (300+ episodes), Instagram (4.7K), email list", revenue: "$300K–$700K",
    frameworks: "The Selling Staircase (5 steps), Buying Signals, Closing the Sale, Expertise Questions, Permission-based selling",
    playbook: "Her Selling Staircase — each of the 5 steps becomes an interactive module with AI feedback.",
    links: {
      linkedin: "https://www.linkedin.com/in/nicolerausch/",
      instagram: "https://www.instagram.com/your_sales_maven/",
      website: "https://yoursalesmaven.com/"
    }
  },
  {
    id: 5, name: "Josh Braun", niche: "Cold Outreach / Non-Pushy B2B Sales", tier: "mid", location: "New York",
    skool: false, skoolNote: "No Skool.",
    why: "'Badass B2B Growth Guide' — 6,400+ buyers. Strong LinkedIn. Teaches non-manipulative sales through micro-frameworks. Content is bite-sized and EXTREMELY framework-heavy. Literally made for Playbook OS.",
    audience: "150K+ LinkedIn, Inside Selling podcast, newsletter", revenue: "$500K–$1.5M",
    frameworks: "Badass B2B Growth Guide, Poke the Bear cold calling, Discovery Call Course, Objection flashcards, Tongue Tied, email templates",
    playbook: "Each micro-framework becomes a standalone micro-playbook — objection handling, cold email openers, discovery questions — with AI personalization.",
    links: {
      linkedin: "https://www.linkedin.com/in/josh-braun/",
      website: "https://joshbraun.com/",
      courses: "https://academy.joshbraun.com/"
    }
  },
  {
    id: 6, name: "Mark Kosoglow", niche: "B2B Sales Leadership / Outbound Revival", tier: "accessible", location: "US",
    skool: false, skoolNote: "No Skool. Runs Digital Sales Collective.",
    why: "Co-founder of Digital Sales Collective with Andrew Mewborn. Former VP Sales at Outreach. Teaches high-energy outbound sales and coaching. Masterclasses on prospecting, discovery, value-based selling.",
    audience: "Growing LinkedIn, DSC community", revenue: "$500K–$1.5M",
    frameworks: "Digital Sales Collective masterclasses, prospecting cadences, value-based selling, sales coaching frameworks",
    playbook: "His outbound prospecting system as a daily-action playbook with AI-generated messaging.",
    links: {
      linkedin: "https://www.linkedin.com/in/mkosoglow/"
    }
  },
  {
    id: 7, name: "Kyle Asay", niche: "Enterprise Sales / Closing Complex Deals", tier: "accessible", location: "US",
    skool: false, skoolNote: "No Skool.",
    why: "VP of Sales who posts transparent sales leadership content on LinkedIn. Known for enterprise deal management, multi-threading, moving stuck deals. Very engaged, approachable.",
    audience: "~50K LinkedIn", revenue: "$200K–$500K (side coaching/content)",
    frameworks: "Enterprise deal management, multi-threading frameworks, pipeline management systems",
    playbook: "His enterprise deal management framework — interactive playbook with AI-assisted stakeholder mapping.",
    links: {
      linkedin: "https://www.linkedin.com/in/kyleasay/"
    }
  },
  {
    id: 8, name: "Jeb Blount", niche: "Fanatical Prospecting / Sales EQ", tier: "mid", location: "Georgia",
    skool: false, skoolNote: "No Skool. Runs Sales Gravy platform + university.",
    why: "Author of 18 books including 'Fanatical Prospecting' (sales bible). Founded Sales Gravy. 360K+ weekly subscribers. #1 downloaded sales podcast. Very framework-rich.",
    audience: "YouTube, LinkedIn, X (@SalesGravy), Instagram, podcast", revenue: "$5M+ (Sales Gravy org)",
    frameworks: "Fanatical Prospecting, Sales EQ, Objections framework, 30-Day Rule, Golden Hours, Virtual Selling",
    playbook: "His 'Fanatical Prospecting' methodology — 30-day interactive challenge with daily actions and AI-tracked metrics.",
    links: {
      linkedin: "https://www.linkedin.com/in/jebblount/",
      x: "https://x.com/salesgravy",
      youtube: "https://www.youtube.com/@SalesGravy",
      website: "https://salesgravy.com/",
      website2: "https://jebblount.com/"
    }
  },
  {
    id: 9, name: "Mike Weinberg", niche: "New Business Development / Sales Management", tier: "mid", location: "US",
    skool: false, skoolNote: "No Skool.",
    why: "Author of 'New Sales. Simplified.' Consultant, coach, speaker. Blunt, tell-it-like-it-is style. Specialty is NEW business development. Frameworks are very actionable.",
    audience: "Moderate YouTube, strong speaking circuit, LinkedIn", revenue: "$1–3M",
    frameworks: "New Sales Simplified framework, Sales Story Talking Points, Target Account Selection, New Business Attack Plan",
    playbook: "His 'New Business Attack Plan' — interactive playbook: build target list, craft sales story, execute outbound.",
    links: {
      linkedin: "https://www.linkedin.com/in/mikeweinberg/",
      website: "https://mikeweinberg.com/"
    }
  },
  {
    id: 10, name: "Art Sobczak", niche: "Cold Calling / Inside Sales", tier: "accessible", location: "Scottsdale, AZ",
    skool: false, skoolNote: "No Skool.",
    why: "40+ year veteran of inside sales training. Wrote 'Smart Calling' (#1 Amazon sales book on day one). Lifetime Achievement Award from AAISP. 1700+ training programs delivered. His call frameworks are INSANELY structured and playbook-ready. SCOTTSDALE-BASED.",
    audience: "LinkedIn, YouTube, podcast, weekly newsletter, 100K+ email list", revenue: "$500K–$2M",
    frameworks: "Smart Calling method, Pre-Call Research / Social Engineering, Opening Statements, Objection Prevention, Complete call process",
    playbook: "His Smart Calling system — interactive call prep playbook: research prospects, build openings, practice with AI before real calls.",
    links: {
      linkedin: "https://www.linkedin.com/in/artsob",
      x: "https://x.com/ArtSobczak",
      website: "https://smartcalling.com/",
      training: "https://artsobczak.training/"
    }
  },
  {
    id: 11, name: "Vouris (Kyle & team)", niche: "B2B Startup Sales Team Building", tier: "accessible", location: "US",
    skool: false, skoolNote: "No Skool.",
    why: "3K YouTube subs but hyper-focused on VC-backed B2B startups. 3-step program: Planning → Hiring → Training. Perfect for startups building sales teams from scratch.",
    audience: "~3K YouTube, LinkedIn", revenue: "$300K–$800K",
    frameworks: "3-Step Sales Team Build (Plan, Hire, Train), Sales Playbook Creation, Startup Sales Process Design",
    playbook: "Startup sales team building framework — interactive playbook for founders going from 0 to first 5 hires.",
    links: {
      linkedin: "https://www.linkedin.com/company/vouris/",
      youtube: "https://www.youtube.com/@Vouris",
      website: "https://www.vouris.com/"
    }
  },
  {
    id: 12, name: "Robin Robins", niche: "IT/MSP Marketing & Sales", tier: "mid", location: "Nashville, TN",
    skool: false, skoolNote: "No Skool.",
    why: "Founder of Technology Marketing Toolkit. 20+ years coaching 10K+ IT business owners. SUPER niche = MSP/IT companies. Dominant in her vertical.",
    audience: "11K YouTube, dominant niche email list, events", revenue: "$5M+",
    frameworks: "Technology Marketing Toolkit, MSP Sales Blueprint, IT Lead Gen system, Done-for-you marketing campaigns",
    playbook: "Her MSP marketing toolkit — interactive playbook for IT company owners to launch lead gen campaigns.",
    links: {
      linkedin: "https://www.linkedin.com/in/robinrobins/",
      youtube: "https://www.youtube.com/@TechnologyMarketingToolkit",
      website: "https://www.technologymarketingtoolkit.com/"
    }
  },
  {
    id: 13, name: "Natasha Vilaseca", niche: "LinkedIn Social Selling for B2B", tier: "accessible", location: "US",
    skool: false, skoolNote: "No Skool.",
    why: "Built her business through LinkedIn social selling. Teaches B2B professionals to dominate lead gen via LinkedIn. Tactical, framework-heavy. Very accessible.",
    audience: "Growing YouTube + LinkedIn", revenue: "$200K–$600K",
    frameworks: "LinkedIn Lead Gen System, Social Selling for B2B, Profile Optimization, Connection Campaigns, DM sequences",
    playbook: "Her LinkedIn lead gen system — step-by-step interactive playbook: optimize → target → connect → convert.",
    links: {
      linkedin: "https://www.linkedin.com/in/natashavilaseca/"
    }
  },
  {
    id: 14, name: "Dave Lorenzo", niche: "Client Relationships / Cross-Selling", tier: "accessible", location: "US",
    skool: false, skoolNote: "No Skool.",
    why: "Coaching sales executives since 1996. Unique niche — growing EXISTING customer relationships (not cold outreach). YouTube + courses.",
    audience: "Small YouTube, strong niche following", revenue: "$300K–$800K",
    frameworks: "Cross-sell/upsell frameworks, Client Retention system, Referral Generation, Relationship Revenue",
    playbook: "His relationship revenue framework — interactive playbook for account managers to identify upsell opportunities.",
    links: {
      linkedin: "https://www.linkedin.com/in/davelorenzo/",
      website: "https://davelorenzo.com/"
    }
  },
  {
    id: 15, name: "Lori Richardson", niche: "B2B Sales Growth / Women in Sales", tier: "accessible", location: "US",
    skool: false, skoolNote: "No Skool.",
    why: "'Score More Sales' brand. B2B Sales Growth Speaker, Trainer. Helps B2B company leaders solve sales team problems. Women in Sales advocate. Very approachable.",
    audience: "LinkedIn, YouTube", revenue: "$300K–$700K",
    frameworks: "Score More Sales methodology, Pipeline & People framework, Sales Team Problem-Solving, Women in Sales programs",
    playbook: "Her sales team diagnostic framework — interactive playbook for sales leaders to identify pipeline problems.",
    links: {
      linkedin: "https://www.linkedin.com/in/scoremoresales/",
      website: "https://scoremoresales.com/"
    }
  },
  {
    id: 16, name: "Patrick Dang", niche: "Modern B2B Sales / Lead Gen", tier: "mid", location: "Reno, NV",
    skool: false, skoolNote: "No Skool.",
    why: "Started at Oracle, top performer year one. 130K+ YouTube. Trained 100K+ students across 150 countries. Young, tech-savvy, very open to partnerships. Content is practical and template-driven.",
    audience: "130K+ YouTube, LinkedIn, Instagram (8.6K), TikTok", revenue: "$500K–$2M",
    frameworks: "Cold Email Templates, LinkedIn Outreach System, B2B Sales Process, Lead Gen Blueprint, Discovery Call Framework, Sales Legacy course",
    playbook: "His cold email + LinkedIn outreach system as a step-by-step playbook with AI-generated templates.",
    links: {
      linkedin: "https://www.linkedin.com/in/patrickdangofficial",
      youtube: "https://www.youtube.com/@patrickdang",
      instagram: "https://www.instagram.com/patrickdangofficial/",
      website: "https://patrickdang.com/"
    }
  },
  {
    id: 17, name: "Iain Swanston (Klozers)", niche: "B2B Sales Training / Sales Playbooks", tier: "accessible", location: "UK (remote-friendly)",
    skool: false, skoolNote: "No Skool.",
    why: "30+ years B2B sales. Runs Klozers — specialist B2B sales training. His company LITERALLY builds sales playbooks. The meta-alignment with Playbook OS is perfect.",
    audience: "Small YouTube, professional niche", revenue: "$500K–$1.5M",
    frameworks: "Sales Playbook system, B2B Sales Process Design, Sales Coaching, Key Account Management",
    playbook: "His playbook creation framework — meta-playbook that teaches companies to build their own, made interactive with AI.",
    links: {
      linkedin: "https://www.linkedin.com/in/iabordeaux/",
      website: "https://www.klozers.com/"
    }
  },
  {
    id: 18, name: "Aaron Ross", niche: "Predictable Revenue / Outbound Systems", tier: "mid", location: "US",
    skool: false, skoolNote: "No Skool.",
    why: "Co-author of 'Predictable Revenue' (the 'Sales Bible of Silicon Valley'). Built the outbound framework at Salesforce. His framework literally changed how SaaS companies do outbound.",
    audience: "5.3K YouTube, strong LinkedIn, book authority", revenue: "$1–3M",
    frameworks: "Predictable Revenue framework, Cold Calling 2.0, Specialization model (SDR/AE split), Pipeline generation",
    playbook: "His Predictable Revenue framework — interactive playbook for SaaS founders to set up outbound teams.",
    links: {
      linkedin: "https://www.linkedin.com/in/aaronross/",
      website: "https://predictablerevenue.com/"
    }
  },
  {
    id: 19, name: "Kristie K. Jones", niche: "SaaS Sales Realignment / Team Performance", tier: "accessible", location: "US",
    skool: false, skoolNote: "No Skool.",
    why: "20+ years sales leadership and executive coaching. Helps SaaS companies stop the panic and make strategic moves. Known for realigning underperforming sales orgs.",
    audience: "LinkedIn-focused, speaking circuit", revenue: "$300K–$800K",
    frameworks: "Sales team realignment, SaaS sales structure, Performance coaching, Quota attainment frameworks",
    playbook: "Her SaaS sales realignment framework — interactive diagnostic playbook for sales leaders.",
    links: {
      linkedin: "https://www.linkedin.com/in/kristiekjones/"
    }
  },
  {
    id: 20, name: "Ashley Dees", niche: "Automotive Sales + EQ / Emotional Intelligence", tier: "accessible", location: "US",
    skool: false, skoolNote: "No Skool.",
    why: "17 years automotive sales, $50M+ closed. Coaches on emotional intelligence + AI + storytelling in sales. Unique EQ-driven angle. Active on LinkedIn, open to collabs.",
    audience: "Growing LinkedIn, niche following", revenue: "$200K–$500K",
    frameworks: "EQ-based selling, Storytelling in sales, AI-enhanced enablement, Authentic sales method",
    playbook: "Her EQ-based selling framework — interactive playbook teaching emotional cues and trust-building.",
    links: {
      linkedin: "https://www.linkedin.com/in/ashleydees/"
    }
  },
  {
    id: 21, name: "Kevin Beales", niche: "Sales Coaching / Coaching Gap Research", tier: "accessible", location: "UK",
    skool: false, skoolNote: "No Skool.",
    why: "Founder & CEO of MySalesCoach. Runs 'State of Sales Coaching' survey. His data shows leaders THINK they coach but reps say they don't. Very meta and playbook-ready.",
    audience: "Professional following, survey authority", revenue: "$500K–$1.5M",
    frameworks: "Sales Coaching methodology, State of Sales Coaching data, Coaching effectiveness measurement, AI + expert coaching",
    playbook: "His coaching framework — interactive playbook for managers to implement structured coaching rhythms.",
    links: {
      linkedin: "https://www.linkedin.com/in/kevinbeales/",
      website: "https://www.mysalescoach.com/"
    }
  },
  {
    id: 22, name: "Julio Viskovich", niche: "Social Selling / LinkedIn for B2B Teams", tier: "mid", location: "Vancouver, BC",
    skool: false, skoolNote: "No Skool.",
    why: "Forbes Top 30 Sales Influencer. Built global sales training at Hootsuite. Works with Fortune 500 (IBM, Mastercard). Strong credentials, still approachable.",
    audience: "LinkedIn + YouTube + podcast appearances", revenue: "$500K–$2M",
    frameworks: "Social Selling Training, Digital Transformation of B2B Sales, LinkedIn Executive Profile, Lead Gen through Social",
    playbook: "His social selling transformation framework — interactive playbook for B2B teams to adopt social selling.",
    links: {
      linkedin: "https://www.linkedin.com/in/julioviskovich/"
    }
  },
  {
    id: 23, name: "Marcus Chan", niche: "Six-Figure B2B Sales / SMB to Enterprise", tier: "accessible", location: "US",
    skool: false, skoolNote: "No Skool.",
    why: "Founded Venli Consulting Group. Author of 'Six-Figure Sales Secrets.' Helps professionals master effective strategies and exceed quotas. Approachable tier.",
    audience: "LinkedIn-focused, growing brand", revenue: "$300K–$1M",
    frameworks: "Six-Figure Sales Secrets, Quota-crushing frameworks, Field-tested B2B strategies, SMB-to-Enterprise transition",
    playbook: "His Six-Figure Sales framework — interactive playbook walking reps through daily actions to hit 6-figures.",
    links: {
      linkedin: "https://www.linkedin.com/in/marcuschanmba/"
    }
  },
  {
    id: 24, name: "Alex Goldfayn", niche: "Revenue Growth / 5-Minute Selling", tier: "mid", location: "US",
    skool: false, skoolNote: "No Skool.",
    why: "Author of '5-Minute Selling' and 'Selling Boldly.' His philosophy: growth from tiny daily actions. EXTREMELY playbook-friendly — his book IS a daily action system.",
    audience: "Small YouTube, strong book authority, speaking circuit", revenue: "$1–3M",
    frameworks: "5-Minute Selling (daily micro-actions), Revenue Growth Habit, Proactive Communication, Bold Selling",
    playbook: "His 5-Minute Selling system — literally a daily micro-action playbook. Built for Playbook OS from day one.",
    links: {
      linkedin: "https://www.linkedin.com/in/alexgoldfayn/",
      website: "https://goldfayn.com/"
    }
  },
  {
    id: 25, name: "Will Barron", niche: "B2B Sales Simplification", tier: "mid", location: "UK",
    skool: false, skoolNote: "No Skool.",
    why: "Runs Salesman.com — 700K+ monthly podcast downloads. 600+ interviews with top sales experts. 2K+ students in Selling Made Simple Academy generating $992M+ in revenue. Anti-complexity approach.",
    audience: "100K+ YouTube, massive podcast, LinkedIn, Instagram", revenue: "$500K–$1.5M",
    frameworks: "Selling Made Simple, expert interview library, Sales School curriculum, B2B sales fundamentals",
    playbook: "His Sales School curriculum distilled into interactive playbooks — each core selling skill as its own module.",
    links: {
      linkedin: "https://www.linkedin.com/in/willbarron",
      x: "https://x.com/willbarron",
      youtube: "https://www.youtube.com/@Salabordon",
      website: "https://salesman.com/"
    }
  }
];

const tierConfig = {
  accessible: { bg: "#10b98122", border: "#10b981", text: "#34d399", label: "ACCESSIBLE" },
  mid: { bg: "#3b82f622", border: "#3b82f6", text: "#60a5fa", label: "MID-TIER" }
};

const platformIcons = {
  linkedin: { label: "LI", color: "#0a66c2" },
  youtube: { label: "YT", color: "#ff0000" },
  x: { label: "X", color: "#9ca3af" },
  instagram: { label: "IG", color: "#e1306c" },
  skool: { label: "SK", color: "#22c55e" },
  website: { label: "WEB", color: "#f59e0b" },
  website2: { label: "WEB2", color: "#f59e0b" },
  courses: { label: "CRS", color: "#a78bfa" },
  training: { label: "TRN", color: "#fb923c" },
  teachable: { label: "TCH", color: "#a78bfa" }
};

const LinkPill = ({ platform, url }) => {
  const p = platformIcons[platform] || { label: platform.toUpperCase().slice(0, 3), color: "#6b7280" };
  return (
    <a href={url} target="_blank" rel="noopener noreferrer" style={{
      display: "inline-flex", alignItems: "center", gap: 3,
      background: p.color + "22", border: `1px solid ${p.color}55`,
      color: p.color, padding: "2px 8px", borderRadius: 4,
      fontSize: 10, fontWeight: 700, fontFamily: "'JetBrains Mono', monospace",
      textDecoration: "none", letterSpacing: 0.3,
      transition: "all 0.15s ease"
    }}
    onMouseEnter={e => { e.currentTarget.style.background = p.color + "44"; }}
    onMouseLeave={e => { e.currentTarget.style.background = p.color + "22"; }}
    >
      {p.label}
    </a>
  );
};

const Card = ({ expert, open, toggle }) => {
  const t = tierConfig[expert.tier];
  return (
    <div style={{
      background: "#111827", borderRadius: 12, marginBottom: 8,
      border: `1px solid ${open ? t.border : "#1f2937"}`,
      transition: "border-color 0.2s ease"
    }}>
      <button onClick={toggle} style={{
        width: "100%", padding: "12px 16px", background: "none", border: "none",
        cursor: "pointer", display: "flex", alignItems: "center", gap: 10, textAlign: "left"
      }}>
        <span style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700,
          color: t.text, background: t.bg, padding: "3px 8px", borderRadius: 6,
          minWidth: 28, textAlign: "center"
        }}>{expert.id}</span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            <span style={{ color: "#f9fafb", fontSize: 15, fontWeight: 600, fontFamily: "'DM Sans', sans-serif" }}>
              {expert.name}
            </span>
            {expert.skool && <span style={{
              background: "#22c55e22", color: "#4ade80", fontSize: 9, fontWeight: 700,
              padding: "1px 6px", borderRadius: 4, fontFamily: "'JetBrains Mono', monospace"
            }}>SKOOL</span>}
            <span style={{
              background: t.bg, color: t.text, fontSize: 9, fontWeight: 700,
              padding: "1px 6px", borderRadius: 4, fontFamily: "'JetBrains Mono', monospace"
            }}>{t.label}</span>
          </div>
          <span style={{ color: "#6b7280", fontSize: 12, fontFamily: "'DM Sans', sans-serif" }}>{expert.niche}</span>
        </div>
        <span style={{
          color: "#4b5563", fontSize: 16, transition: "transform 0.2s",
          transform: open ? "rotate(180deg)" : "rotate(0deg)"
        }}>▾</span>
      </button>

      {open && (
        <div style={{ padding: "0 16px 16px" }}>
          {/* Social Links Row */}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 5, marginBottom: 10 }}>
            {Object.entries(expert.links).map(([platform, url]) => (
              <LinkPill key={platform} platform={platform} url={url} />
            ))}
          </div>

          <div style={{ background: "#0d1117", borderRadius: 8, padding: 12, marginBottom: 8 }}>
            <div style={{ color: t.text, fontSize: 10, fontWeight: 700, letterSpacing: 1, textTransform: "uppercase", fontFamily: "'JetBrains Mono', monospace", marginBottom: 4 }}>Why Target</div>
            <p style={{ color: "#d1d5db", fontSize: 13, lineHeight: 1.6, margin: 0, fontFamily: "'DM Sans', sans-serif" }}>{expert.why}</p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginBottom: 8 }}>
            {[
              { l: "Audience", v: expert.audience },
              { l: "Est. Revenue", v: expert.revenue },
              { l: "Location", v: expert.location },
              { l: "Skool", v: expert.skoolNote, h: expert.skool }
            ].map((item, i) => (
              <div key={i} style={{ background: "#0d1117", borderRadius: 6, padding: "6px 10px" }}>
                <div style={{ color: item.h ? "#4ade80" : "#6b7280", fontSize: 9, fontWeight: 700, letterSpacing: 0.5, textTransform: "uppercase", fontFamily: "'JetBrains Mono', monospace" }}>{item.l}</div>
                <div style={{ color: item.h ? "#86efac" : "#9ca3af", fontSize: 11, lineHeight: 1.4, marginTop: 2, fontFamily: "'DM Sans', sans-serif" }}>{item.v}</div>
              </div>
            ))}
          </div>

          <div style={{ background: "#0d1117", borderRadius: 8, padding: 12, marginBottom: 8 }}>
            <div style={{ color: "#fbbf24", fontSize: 10, fontWeight: 700, letterSpacing: 1, textTransform: "uppercase", fontFamily: "'JetBrains Mono', monospace", marginBottom: 4 }}>Frameworks (Playbook Targets)</div>
            <p style={{ color: "#fde68a", fontSize: 12, lineHeight: 1.5, margin: 0, fontFamily: "'DM Sans', sans-serif" }}>{expert.frameworks}</p>
          </div>

          <div style={{ background: t.bg, borderLeft: `3px solid ${t.border}`, borderRadius: "0 8px 8px 0", padding: 12 }}>
            <div style={{ color: t.text, fontSize: 10, fontWeight: 700, letterSpacing: 1, textTransform: "uppercase", fontFamily: "'JetBrains Mono', monospace", marginBottom: 4 }}>Playbook OS Angle</div>
            <p style={{ color: "#e5e7eb", fontSize: 12, lineHeight: 1.5, margin: 0, fontFamily: "'DM Sans', sans-serif" }}>{expert.playbook}</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default function ExpertList() {
  const [openId, setOpenId] = useState(null);
  const [filter, setFilter] = useState("all");
  const [search, setSearch] = useState("");

  const filtered = experts
    .filter(e => filter === "all" || (filter === "skool" ? e.skool : e.tier === filter))
    .filter(e => search === "" ||
      e.name.toLowerCase().includes(search.toLowerCase()) ||
      e.niche.toLowerCase().includes(search.toLowerCase()) ||
      e.location.toLowerCase().includes(search.toLowerCase())
    );

  const accessibleCount = experts.filter(e => e.tier === "accessible").length;
  const midCount = experts.filter(e => e.tier === "mid").length;
  const skoolCount = experts.filter(e => e.skool).length;
  const azCount = experts.filter(e => e.location.toLowerCase().includes("az") || e.location.toLowerCase().includes("scottsdale")).length;

  return (
    <div style={{ minHeight: "100vh", background: "#0a0e1a", color: "#e5e7eb", fontFamily: "'DM Sans', sans-serif" }}>
      <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />

      <div style={{ maxWidth: 720, margin: "0 auto", padding: "24px 16px" }}>
        <div style={{ marginBottom: 20 }}>
          <h1 style={{ fontSize: 20, fontWeight: 700, color: "#f9fafb", margin: "0 0 4px" }}>
            Athio Playbook OS — 25 Expert Targets v3
          </h1>
          <p style={{ color: "#6b7280", fontSize: 13, margin: 0 }}>
            With verified social links. Click any card to expand, then click links to go direct.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6, marginBottom: 14 }}>
          {[
            { l: "Accessible", c: accessibleCount, cl: "#34d399" },
            { l: "Mid-Tier", c: midCount, cl: "#60a5fa" },
            { l: "On Skool", c: skoolCount, cl: "#4ade80" },
            { l: "In AZ", c: azCount, cl: "#fb923c" }
          ].map((s, i) => (
            <div key={i} style={{ background: "#111827", borderRadius: 8, padding: "8px 10px", textAlign: "center" }}>
              <div style={{ color: s.cl, fontSize: 20, fontWeight: 700, fontFamily: "'JetBrains Mono', monospace" }}>{s.c}</div>
              <div style={{ color: "#6b7280", fontSize: 10, fontWeight: 600, fontFamily: "'JetBrains Mono', monospace" }}>{s.l}</div>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", gap: 6, marginBottom: 10, flexWrap: "wrap" }}>
          {[
            { k: "all", l: "All 25" },
            { k: "accessible", l: "Accessible" },
            { k: "mid", l: "Mid-Tier" },
            { k: "skool", l: "Skool" }
          ].map(f => (
            <button key={f.k} onClick={() => setFilter(f.k)} style={{
              padding: "5px 12px", borderRadius: 6, border: "1px solid #1f2937",
              background: filter === f.k ? "#1f2937" : "transparent",
              color: filter === f.k ? "#f9fafb" : "#6b7280",
              fontSize: 11, fontWeight: 600, cursor: "pointer",
              fontFamily: "'JetBrains Mono', monospace"
            }}>{f.l}</button>
          ))}
          <input
            type="text" placeholder="Search name, niche, location..."
            value={search} onChange={e => setSearch(e.target.value)}
            style={{
              flex: 1, minWidth: 140, padding: "5px 10px", borderRadius: 6,
              border: "1px solid #1f2937", background: "#111827", color: "#d1d5db",
              fontSize: 11, fontFamily: "'JetBrains Mono', monospace", outline: "none"
            }}
          />
        </div>

        <div style={{
          background: "linear-gradient(135deg, #111827, #0d1117)", borderRadius: 10,
          padding: 14, marginBottom: 14, border: "1px solid #1f2937"
        }}>
          <div style={{ color: "#fb923c", fontSize: 10, fontWeight: 700, letterSpacing: 1, textTransform: "uppercase", marginBottom: 6, fontFamily: "'JetBrains Mono', monospace" }}>
            Priority First Moves
          </div>
          <p style={{ color: "#d1d5db", fontSize: 12, lineHeight: 1.6, margin: 0 }}>
            <strong style={{ color: "#34d399" }}>Mor Assouline</strong> (FDTC, has Skool, SaaS sales coaching) and <strong style={{ color: "#34d399" }}>Art Sobczak</strong> (Smart Calling, Scottsdale AZ local, 40-year veteran) are the two strongest first-move targets. Both are framework-rich, in the right revenue range, and reachable. Start building their playbooks today.
          </p>
        </div>

        {filtered.map(e => (
          <Card key={e.id} expert={e} open={openId === e.id} toggle={() => setOpenId(openId === e.id ? null : e.id)} />
        ))}

        <p style={{ color: "#374151", fontSize: 10, textAlign: "center", marginTop: 16, fontFamily: "'JetBrains Mono', monospace" }}>
          v3 — Feb 2026 — With verified social links — Athio Playbook OS
        </p>
      </div>
    </div>
  );
}