/* global React */
const skillsStyles = {
  section: { background: 'var(--bg-1)' },
  intro: {
    display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'var(--s-8)',
    alignItems: 'start', marginBottom: 'var(--s-7)',
  },
  introTitle: {
    fontSize: 'clamp(22px, 2.2vw, 30px)', fontWeight: 500,
    letterSpacing: 'var(--tracking-tight)', lineHeight: 1.15, margin: 0,
  },
  introCopy: {
    fontSize: 17, fontWeight: 300, lineHeight: 1.65,
    color: 'var(--fg-2)', margin: 0,
    display: 'flex', flexDirection: 'column', gap: 'var(--s-4)',
  },

  stack: {
    border: 'var(--border-hair)',
    borderRadius: 'var(--r-3)',
    overflow: 'hidden',
    background: 'var(--bg-1)',
  },

  tier: {
    position: 'relative',
    borderTop: 'var(--border-hair)',
  },
  tierHead: {
    display: 'grid', gridTemplateColumns: '60px 220px 1fr auto',
    alignItems: 'center', gap: 'var(--s-4)',
    padding: 'var(--s-5) var(--s-5) var(--s-4) var(--s-5)',
    borderBottom: '1px solid var(--latus-dark-blue)',
    background: 'var(--bg-1)',
  },
  tierIdx: {
    fontSize: 11, fontWeight: 500, color: 'var(--fg-3)',
    letterSpacing: '0.12em', textTransform: 'uppercase', fontVariantNumeric: 'tabular-nums',
  },
  tierLabel: {
    fontSize: 'clamp(18px, 1.8vw, 24px)', fontWeight: 500,
    color: 'var(--latus-dark-blue)', letterSpacing: '0.02em', lineHeight: 1,
  },
  tierDesc: {
    fontSize: 13, color: 'var(--fg-2)', fontWeight: 300,
    fontStyle: 'italic',
  },
  tierMark: {
    width: 72, height: 28,
    display: 'block',
  },

  row: {
    display: 'grid', gridTemplateColumns: '60px 220px 1fr',
    alignItems: 'baseline', gap: 'var(--s-4)',
    padding: 'var(--s-4) var(--s-5)',
    borderBottom: '1px solid var(--line-1)',
    transition: 'background var(--dur-fast) var(--ease-out)',
  },
  rowLast: { borderBottom: 'none' },
  rowIdx: {
    fontSize: 13, fontWeight: 500, color: 'var(--fg-3)',
    fontVariantNumeric: 'tabular-nums', letterSpacing: 0,
  },
  rowTitle: {
    fontSize: 14, fontWeight: 500, color: 'var(--fg-1)',
    letterSpacing: 0, lineHeight: 1.3,
  },
  chips: { display: 'flex', flexWrap: 'wrap', gap: 6 },
  chip: {
    display: 'inline-flex', alignItems: 'center',
    padding: '5px 11px', borderRadius: 'var(--r-pill)',
    border: '1px solid var(--line-1)', background: 'var(--bg-1)',
    fontSize: 13, color: 'var(--fg-1)', fontWeight: 400, lineHeight: 1.2,
    whiteSpace: 'nowrap',
  },
  chipAccent: {
    background: 'var(--latus-light-blue)',
    borderColor: 'transparent',
    color: 'var(--latus-dark-blue)',
  },
};

// 5 tiers, foundation-up: think → run → build engine → surface → foundations.
const TIERS = [
  {
    label: 'Strategy & design',
    desc: 'what to build, how to architect it',
    depth: 1,
    groups: [
      { i: '01', title: 'Strategy & architecture', items: ['AI roadmap', 'Use-case prioritisation', 'Solution architecture', 'System design', 'Cloud architecture'] },
    ],
  },
  {
    label: 'Platform',
    desc: 'where it runs, how it ships',
    depth: 2,
    groups: [
      { i: '02', title: 'Cloud',             items: ['AWS', 'Azure', 'GCP', 'Railway', 'Vercel'] },
      { i: '03', title: 'Platform & DevOps', items: ['Kubernetes', 'Docker', 'Terraform', 'GitHub Actions', 'CI/CD', 'IaC', 'Linux'] },
    ],
  },
  {
    label: 'Backend & data',
    desc: 'the engine: data, AI, serving',
    depth: 3,
    accent: true,
    groups: [
      { i: '04', title: 'Data engineering',       items: ['Databricks', 'Snowflake', 'BigQuery', 'ClickHouse', 'Spark', 'Airflow', 'ETL/ELT'] },
      { i: '05', title: 'ML & MLOps',             items: ['MLOps', 'MLflow', 'Databricks', 'Vector databases', 'Prophet'] },
      { i: '06', title: 'GenAI patterns & platforms', items: ['RAG', 'AI agents', 'Embeddings', 'Function calling', 'Hybrid search', 'Vertex AI', 'Azure AI Foundry', 'Azure AI Search'] },
      { i: '07', title: 'GenAI tooling & evals',  items: ['Claude Agent SDK', 'PydanticAI', 'OpenAI Agents SDK', 'Langfuse', 'Arize Phoenix', 'LLM evals'] },
      { i: '08', title: 'APIs & serving',         items: ['FastAPI', 'Flask'] },
    ],
  },
  {
    label: 'Frontend',
    desc: 'what the user touches',
    depth: 4,
    groups: [
      { i: '09', title: 'Frontend & product surface', items: ['Next.js', 'React', 'Vite', 'TypeScript', 'Tailwind CSS', 'Streamlit'] },
      { i: '10', title: 'Analytics & BI',             items: ['Power BI', 'Google Analytics'] },
    ],
  },
  {
    label: 'Foundations',
    desc: 'how I build, what I write in',
    depth: 5,
    groups: [
      { i: '11', title: 'Engineering practice', items: ['Testing', 'Code review', 'Git workflows', 'Documentation', 'Pre-commit hooks'] },
      { i: '12', title: 'Languages',            items: ['Python', 'SQL', 'TypeScript', 'Bash'] },
    ],
  },
];

// Foundation-style schematic: 5 stratums, the active tier filled indigo.
function TierMark({ depth, total = 5 }) {
  const padding = 2;
  const totalHeight = 24;
  const stripH = totalHeight / total;
  return (
    <svg style={skillsStyles.tierMark} viewBox="0 0 72 28" aria-hidden="true">
      <g fill="none" stroke="var(--latus-dark-blue)" strokeWidth="1.25">
        <rect x={padding} y={padding} width={72 - 2*padding} height={totalHeight}/>
        {Array.from({ length: total - 1 }, (_, i) => (
          <line key={i}
            x1={padding} y1={padding + stripH * (i + 1)}
            x2={72 - padding} y2={padding + stripH * (i + 1)}/>
        ))}
      </g>
      <rect
        x={padding} y={padding + stripH * (depth - 1)}
        width={72 - 2*padding} height={stripH}
        fill="var(--latus-indigo)" opacity="0.85"/>
    </svg>
  );
}

function Skills() {
  return (
    <section id="stack" className="section-pad" style={skillsStyles.section}>
      <div className="container">
        <SectionHead index="01 / Stack" title="What's in the toolbox."/>
        <div style={skillsStyles.intro} className="skills-intro reveal">
          <h3 style={skillsStyles.introTitle}>Full-stack AI products, from strategy through ops.</h3>
          <div style={skillsStyles.introCopy}>
            <p style={{ margin: 0 }}>
              Strategy and architecture come first: use-case prioritisation, roadmaps, build-vs-buy decisions with leadership before any code lands. Then I build it: full-stack AI products across cloud architecture, frontend, API, AI, ML, data pipelines, ops.
            </p>
            <p style={{ margin: 0 }}>
              Seven years in, the data engineering and classical ML side is still part of the job (anomaly detection, recommendation systems, ETL on Kubernetes). Testing, code review, branches, CI/CD are non-negotiable.
            </p>
            <p style={{ margin: 0 }}>
              Pragmatic by default: off-the-shelf where it works, low operational overhead, ship value fast without cutting corners. Each client's stack is different; picking up new tools per engagement is the norm.
            </p>
          </div>
        </div>

        <div style={skillsStyles.stack} className="reveal">
          {TIERS.map((tier, ti) => (
            <div key={tier.label} style={{ ...skillsStyles.tier, borderTop: ti === 0 ? 'none' : skillsStyles.tier.borderTop }}>
              <div style={skillsStyles.tierHead} className="tier-head">
                <span style={skillsStyles.tierIdx}>Tier {String(ti + 1).padStart(2, '0')}</span>
                <span style={skillsStyles.tierLabel}>{tier.label}</span>
                <span style={skillsStyles.tierDesc}>{tier.desc}</span>
                <TierMark depth={tier.depth}/>
              </div>
              <div>
                {tier.groups.map((g, gi) => (
                  <div key={g.i}
                    style={{ ...skillsStyles.row, ...(gi === tier.groups.length - 1 ? skillsStyles.rowLast : {}) }}
                    className="stack-row"
                    onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-2)'}
                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
                  >
                    <span style={skillsStyles.rowIdx}>{g.i}</span>
                    <span style={skillsStyles.rowTitle}>{g.title}</span>
                    <div style={skillsStyles.chips}>
                      {g.items.map(it => (
                        <span key={it} style={{ ...skillsStyles.chip, ...(tier.accent ? skillsStyles.chipAccent : {}) }}>{it}</span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .skills-intro { grid-template-columns: 1fr !important; gap: var(--s-4) !important; }
        }
        @media (max-width: 760px) {
          .tier-head {
            grid-template-columns: 1fr auto !important;
            row-gap: 4px !important;
          }
          .tier-head > :nth-child(2) { grid-column: 1 / 2; grid-row: 1; }
          .tier-head > :nth-child(1) { grid-column: 1 / 2; grid-row: 0; }
          .tier-head > :nth-child(3) { grid-column: 1 / 2; }
          .tier-head > :nth-child(4) { grid-row: 1 / span 2; grid-column: 2 / 3; }
          .stack-row {
            grid-template-columns: 40px 1fr !important;
            row-gap: var(--s-3) !important;
          }
          .stack-row > :nth-child(3) { grid-column: 1 / -1; }
        }
      `}</style>
    </section>
  );
}

window.Skills = Skills;