// BESTIARY · catalogue of works, aurologic front and center
const BESTIARY = [
  {
    id: 'aurologic',
    sigil: '✦',
    name: 'aurologic GmbH',
    latin: 'Aurum Logica',
    tagline: 'A German infrastructure house. The primary post.',
    body: 'Kept in service since the spring of 2024. The duties are broad and the tools are serious: Vue.js across the company surface, Golang at the engines, admin consoles and internal instruments, and the pipelines (Jenkins, Docker, Elasticsearch) that bind monolith and microservice estates into one working concern. On-premise DDoS mitigation is part of the trade here, and much of what the subject knows of defending a network was earned under this roof.',
    tags: ['Vue.js', 'Golang', 'Microservices', 'DDoS Mitigation', 'Jenkins', 'Docker', 'Elasticsearch'],
    rarity: 'PRIMARY',
    year: '2024 · present',
    url: 'https://aurologic.com',
  },
  {
    id: 'thesis',
    sigil: '∎',
    name: 'M.Sc. Thesis · in progress',
    latin: 'Dimensio Incerta',
    tagline: 'On the cost of getting the classifier wrong.',
    body: 'Impact of machine-learning traffic classification errors on multi-class capacity dimensioning in multirate loss systems. A formal study linking the classifier’s confusion matrix to distortions in the per-class offered-traffic vector, resting on Full Availability Group models and the Kaufman–Roberts recursion for blocking probabilities. Separates nominal from observed traffic, pursues a sensitivity analysis over realistic OTT and IPTV mixes, and ends with practical guidance on the minimum classifier accuracy a reliable network dimensioning will tolerate.',
    tags: ['Traffic Classification', 'Multirate Loss', 'Kaufman–Roberts', 'Blocking Probability', 'OTT · IPTV', 'Capacity Planning'],
    rarity: 'ARTIFACT',
    year: '2025 · 2026',
    url: '#',
  },
  {
    id: 'cyberfilters',
    sigil: '⊕',
    name: 'CyberFilters',
    latin: 'Custodia Retis',
    tagline: 'Clusters, panels, and the automations that spare the support desk.',
    body: 'Lead developer and system administrator since the spring of 2023. Upkeep of the VPS clusters, admin panels, and the control instruments, together with the small automations that keep the technical-support desk from drowning when the weather turns against the network.',
    tags: ['Node.js', 'MySQL', 'Linux', 'Nginx', 'Docker', 'VPS'],
    rarity: 'COMMANDER',
    year: '2023 · present',
    url: 'https://cyberfilters.com',
  },
  {
    id: 'virfect',
    sigil: '☗',
    name: 'Virfect Solutions',
    latin: 'Virtus Effectus',
    tagline: 'A small hosting house. Founded, ran, closed on good terms.',
    body: 'Co-founder and chief technologist from 2020 to 2023. The whole estate fell under the post: front pages and services, clusters and networks, the security perimeter, and the dull necessary ledgers. Brought to an honourable close in May 2023 and its charts folded into CyberFilters.',
    tags: ['TypeScript', 'NestJS', 'Vue.js', 'Express', 'MySQL', 'Cloud'],
    rarity: 'LEGENDARY',
    year: '2020 · 2023',
    url: '#',
  },
  {
    id: 'pharmo',
    sigil: '⚕',
    name: 'Pharmo',
    latin: 'Remedium Mobile',
    tagline: 'A pharmacy in the pocket. Rendered as a graduation piece.',
    body: 'A mobile companion for Algerian pharmacies: it puts the citizen in reach of the nearest dispensary, tracks stock in near time, and speaks the three tongues of the country. Drawn up, built and delivered as the closing work of the Bachelor’s degree.',
    tags: ['React Native', 'Expo', 'NestJS', 'Fastify', 'MariaDB', 'Prisma', 'Mapbox'],
    rarity: 'ARTIFACT',
    year: '2024',
    url: 'https://drive.google.com/file/d/1czqP1zY5iXU9jAB10VhS1NQmsZNfCi6V/view?usp=sharing',
  },
  {
    id: 'triospare',
    sigil: '⌂',
    name: 'Triospare',
    latin: 'Commercium Amici',
    tagline: 'A friend’s shop, quietly kept in working order.',
    body: 'Administrator and occasional architect for a friend’s commercial site. Payment gateways, modest internal tools, infrastructure trimming, and whatever small repair the shop has need of in a given week.',
    tags: ['Linux', 'Payments', 'API', 'Ops'],
    rarity: 'COMPANION',
    year: 'ongoing',
    url: 'https://triospare.com',
  },
];

function RarityBar({ rarity }) {
  const colors = {
    PRIMARY:   'var(--stamp)',
    LEGENDARY: 'var(--stamp)',
    ARTIFACT:  'var(--stamp)',
    COMMANDER: 'var(--ink)',
    COMPANION: 'var(--ink-soft)',
    SECRET:    'var(--ink)',
    APPRENTICE:'var(--ink-soft)',
  };
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <div className="barcode" style={{ height: 18 }}>
        {Array.from({length: 14}).map((_, i) => (
          <span key={i} style={{ width: (i%3===0?3:1) + 'px', height: 18, background: colors[rarity] || 'var(--ink)' }} />
        ))}
      </div>
      <span className="mono" style={{ fontSize: 10, letterSpacing: '.2em', color: colors[rarity] }}>{rarity}</span>
    </div>
  );
}

function BestiaryCard({ item, idx, featured, onPick }) {
  return (
    <article className="card lift" onClick={() => onPick(idx)}
      style={{
        padding: 22,
        position: 'relative',
        cursor: 'pointer',
        background: featured ? 'var(--ink)' : 'var(--paper)',
        color: featured ? 'var(--paper)' : 'var(--ink)',
        borderColor: 'var(--ink)',
        minHeight: 260,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '.25em', opacity: .7 }}>
            SPECIMEN № {String(idx + 1).padStart(3, '0')}
          </div>
          <div className="didone" style={{ fontSize: 48, lineHeight: 1, color: 'var(--stamp)' }}>
            {item.sigil}
          </div>
        </div>
        <h3 className="didone" style={{ fontSize: 28, lineHeight: 1.05, marginTop: 14, marginBottom: 4 }}>
          {item.name}
        </h3>
        <div className="serif" style={{ fontStyle: 'italic', fontSize: 14, opacity: .75, marginBottom: 14 }}>
          {item.latin}
        </div>
        <p style={{ fontSize: 14, lineHeight: 1.4, marginBottom: 12 }}>{item.tagline}</p>
      </div>
      <div>
        <hr className="rule-dash" style={{ borderColor: featured ? 'rgba(243,237,226,.3)' : undefined }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: '.2em' }}>{item.year}</span>
          <RarityBar rarity={item.rarity} />
        </div>
      </div>
    </article>
  );
}

function Bestiary() {
  const [featured, setFeatured] = React.useState(0);
  const entry = BESTIARY[featured];

  return (
    <section id="projects" className="page" style={{ paddingTop: 40, paddingBottom: 60, position: 'relative' }}>
      <hr className="rule-thick" />
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding: '18px 0 6px'}}>
        <h2 className="display" style={{ fontSize: 'clamp(52px, 7vw, 110px)', lineHeight: .85 }}>
          Bestiary<span style={{color:'var(--stamp)'}}>.</span>
        </h2>
        <div className="kicker">A CATALOGUE OF WORKS, SPECIMENS &amp; SMALL EMPIRES</div>
      </div>
      <hr className="rule" />

      <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 36, padding: '30px 0' }}>
        <div className="card" style={{ padding: 28, background: 'var(--paper-shade)', position: 'relative' }}>
          <div style={{ position: 'absolute', top: 10, right: 14 }} className="mono">
            <span style={{ fontSize: 10, letterSpacing: '.2em', color: 'var(--ink-fade)' }}>
              PLATE {String(featured + 1).padStart(2,'0')} / {String(BESTIARY.length).padStart(2,'0')}
            </span>
          </div>
          <div className="didone bestiary-sigil" style={{ fontSize: 140, lineHeight: .85, color: 'var(--stamp)' }}>
            {entry.sigil}
          </div>
          <div className="kicker" style={{ marginTop: 12 }}>FEATURED · {entry.rarity}</div>
          <h3 className="didone" style={{ fontSize: 'clamp(40px, 4.4vw, 64px)', lineHeight: .95, marginTop: 4 }}>
            {entry.name}
          </h3>
          <div className="serif" style={{ fontStyle: 'italic', fontSize: 18, color: 'var(--ink-fade)', marginBottom: 14 }}>
            “{entry.latin}”
          </div>
          <p style={{ maxWidth: 560, lineHeight: 1.5, marginBottom: 18, textAlign: 'justify' }}>
            {entry.body}
          </p>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 20 }}>
            {entry.tags.map(t => (
              <span key={t} className="mono" style={{
                border: '1px solid var(--ink)',
                padding: '3px 10px',
                fontSize: 11,
                letterSpacing: '.12em',
                textTransform: 'uppercase',
              }}>{t}</span>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <a href={entry.url} target="_blank" rel="noreferrer" className="btn red">INSPECT →</a>
            <span className="mono" style={{fontSize: 11, opacity: .55}}>{entry.year}</span>
          </div>

          <div style={{ position: 'absolute', bottom: 0, right: 0, width: 54, height: 54,
            background: 'linear-gradient(-135deg, var(--paper) 50%, var(--paper-deep) 50%)',
            borderLeft: '1px solid var(--ink)', borderTop: '1px solid var(--ink)' }} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
          {BESTIARY.map((item, i) => (
            <BestiaryCard key={item.id} item={item} idx={i} featured={i === featured} onPick={setFeatured} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Bestiary });