/* Skills section — role lens (page-locked) x density subview (Simplified | Detailed treemap) */

/* ---- Cluster model (sourced from both resumes) ----
   Each cluster: hero card (Simplified view) + full skill list (Detailed treemap).
   `weight` per role drives treemap block size + ordering emphasis. */
const SKILL_CLUSTERS = {
  leadership: {
    id: 'leadership',
    title: 'Engineering Leadership',
    essence: 'Setting technical strategy and growing the teams that ship it.',
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.5L12 16.5 7.1 18.2l.9-5.5-4-3.9 5.5-.8z"></path>
      </svg>
    ),
    skills: [
      'Strategic Thinking — Engineering, IT & Recruitment',
      'Internal Mentoring & Training',
      'Negotiation & Conflict Resolution',
      'Effective Communication (GMAT — 93rd percentile)',
      'External Stakeholder Management',
      'Scrum & Scaled Agile Mastery',
      'Program Estimation & Timesheets',
      'Presales, Change & Vendor Management',
    ],
    weight: { eng: 3, pm: 2 },
    caseStudy: 'govstack',
    tags: ['eng', 'pm'],
  },
  engineering: {
    id: 'engineering',
    title: 'Solution Architecture',
    essence: 'Cloud-native modular systems built for population-scale resilience.',
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <rect x="2" y="2" width="8" height="8" rx="2"></rect><rect x="14" y="2" width="8" height="8" rx="2"></rect>
        <rect x="2" y="14" width="8" height="8" rx="2"></rect><rect x="14" y="14" width="8" height="8" rx="2"></rect>
        <path d="M10 6h4M6 10v4M18 10v4M10 18h4"></path>
      </svg>
    ),
    skills: [
      'Solution Architecture',
      'Cloud Native Modular Architecture (Microservices, Kubernetes, Helm)',
      'AI-assisted Development & QA Cycles',
      'Security & DevOps Tooling',
      'User-Centric Design Approach',
      'Open-source Best Practices (Apache Fineract, Mojaloop)',
    ],
    weight: { eng: 3, pm: 1 },
    caseStudy: 'govstack',
    tags: ['eng'],
  },
  product: {
    id: 'product',
    title: 'Technical Product Management',
    essence: 'Discovery to delivery — owning outcomes across the B2B product lifecycle.',
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M2 12h4l3-9 6 18 3-9h4"></path>
      </svg>
    ),
    skills: [
      'Product Positioning & Roadmapping',
      'Product Lifecycle — B2B Enterprise',
      'KPI & Outcome Ownership',
      'Backlog Management',
      'Packaging & Pricing Strategy',
      'Partnership Development',
      'Community Development',
      'Social Impact',
      'Scaled venture to 1M USD via product-led growth',
    ],
    weight: { eng: 2, pm: 3 },
    caseStudy: 'grameen',
    tags: ['pm'],
  },
  domain: {
    id: 'domain',
    title: 'Fintech Domain',
    essence: 'Deep mastery across payments, lending & digital public infrastructure.',
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="10"></circle><path d="M12 6v12M8 9.5h5a2.5 2.5 0 010 5H8"></path>
      </svg>
    ),
    skills: [
      'Payments: G2P disbursements, C2B collections, store-of-value interop',
      'Lending: microcredit, alternative credit scoring, line of credit',
      'Digital Public Infrastructure & GovStack standards-shaping',
      'Group savings, early wage access, financial inclusion',
      'Mojaloop · Fineract · Payment Hub ecosystems',
    ],
    weight: { eng: 2, pm: 3 },
    caseStudy: 'one-acre-fund',
    tags: ['eng', 'pm'],
  },
};

/* Role-driven cluster ordering — mirrors how each resume sequences its Skills block */
const CLUSTER_ORDER = {
  eng: ['leadership', 'engineering', 'domain', 'product'],
  pm: ['product', 'domain', 'leadership', 'engineering'],
};

/* Hero cards shown in Simplified view (top 3 by role emphasis) */
const SIMPLIFIED_KEYS = {
  eng: ['engineering', 'leadership', 'domain'],
  pm: ['product', 'domain', 'leadership'],
};

function SkillCard({ cluster, isOpen, onToggle }) {
  return (
    <div className="skill-card" onClick={onToggle} role="button" aria-expanded={isOpen} tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle(); } }}>
      <div className="skill-card__icon">{cluster.icon}</div>
      <h3 className="skill-card__title">{cluster.title}</h3>
      <p className="skill-card__essence">{cluster.essence}</p>
      {!isOpen && <p className="skill-card__expand-hint">Click to expand</p>}
      <div className={'skill-card__details' + (isOpen ? ' skill-card__details--open' : '')}>
        <ul className="skill-card__points">
          {cluster.skills.slice(0, 5).map((pt, i) => <li key={i}>{pt}</li>)}
        </ul>
        <a href={'#case-studies'} className="skill-card__link" onClick={(e) => e.stopPropagation()}>
          See where I proved it
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14M12 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  );
}

/* Treemap tile — one cluster, sized by role weight, listing every skill */
function TreemapTile({ cluster, lens }) {
  const w = cluster.weight[lens] || 1;
  return (
    <div className={'tm-tile tm-tile--w' + w} style={{ '--tm-grow': w }}>
      <div className="tm-tile__head">
        <span className="tm-tile__icon">{cluster.icon}</span>
        <h3 className="tm-tile__title">{cluster.title}</h3>
        <span className="tm-tile__count">{cluster.skills.length}</span>
      </div>
      <ul className="tm-tile__skills">
        {cluster.skills.map((s, i) => <li key={i}>{s}</li>)}
      </ul>
      <a href="#case-studies" className="tm-tile__link">See where I proved it →</a>
    </div>
  );
}

function SignatureSkills() {
  const { lens } = React.useContext(LensContext);
  const [view, setView] = React.useState('simple'); // 'simple' | 'detailed'
  const [openId, setOpenId] = React.useState(null);

  const heroClusters = SIMPLIFIED_KEYS[lens].map((k) => SKILL_CLUSTERS[k]);
  const allClusters = CLUSTER_ORDER[lens].map((k) => SKILL_CLUSTERS[k]);

  return (
    <section className="section section--alt" id="skills">
      <div className="container">
        <div className="section-header section-header--with-toggle anim-in" data-anim>
          <div>
            <p className="t-label">Core Capabilities</p>
            <h2 className="t-display">Skills</h2>
          </div>
          <div className="view-toggle" role="tablist" aria-label="Skill detail level">
            <button className={'view-toggle__btn' + (view === 'simple' ? ' view-toggle__btn--active' : '')}
              role="tab" aria-selected={view === 'simple'} onClick={() => setView('simple')}>
              Highlights
            </button>
            <button className={'view-toggle__btn' + (view === 'detailed' ? ' view-toggle__btn--active' : '')}
              role="tab" aria-selected={view === 'detailed'} onClick={() => setView('detailed')}>
              Full map
            </button>
          </div>
        </div>

        {view === 'simple' ? (
          <div className="skills-grid">
            {heroClusters.map((c) => (
              <SkillCard key={c.id} cluster={c} isOpen={openId === c.id}
                onToggle={() => setOpenId(openId === c.id ? null : c.id)} />
            ))}
          </div>
        ) : (
          <div className="skills-treemap">
            {allClusters.map((c) => <TreemapTile key={c.id} cluster={c} lens={lens} />)}
          </div>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { SignatureSkills });