
// sulo-sections.jsx — Nav, Hero, Problem, BuildingBlocks, UseCases, Community, Publications, Download, Team, Tutorials

const SULO_CLASSES = [
  { id: 'Object', color: '#3B82F6', bg: 'rgba(59,130,246,0.12)', definition: 'Any physical or non-physical thing that exists independently.', examples: ['Patient', 'Drug', 'Pizza', 'Hospital', 'Gene'], note: 'The foundational "thing" in SULO.' },
  { id: 'Process', color: '#F59E0B', bg: 'rgba(245,158,11,0.12)', definition: 'Something that unfolds over time, involving participants.', examples: ['Diagnosis', 'Drug administration', 'Baking', 'Surgery'], note: 'Connects objects through participation.' },
  { id: 'Feature', color: '#10B981', bg: 'rgba(16,185,129,0.12)', definition: 'An intrinsic, contextual, or attributed characteristic.', examples: ['Blood pressure', 'Severity', 'Color', 'Temperature'], note: 'Describes properties of Objects or Processes.' },
  { id: 'Role', color: '#34D399', bg: 'rgba(52,211,153,0.1)', definition: 'A contextual function an object plays in a setting. Subclass of Feature.', examples: ['Patient role', 'Prescriber role', 'Ingredient role'], note: 'Same object, different roles in different processes.' },
  { id: 'Quantity', color: '#6EE7B7', bg: 'rgba(110,231,183,0.1)', definition: 'A measurable feature expressed as a value + unit. Subclass of Feature.', examples: ['500 mg dose', '37 °C temperature', '30 cm diameter'], note: 'Links measurements to their bearers.' },
  { id: 'Collection', color: '#8B5CF6', bg: 'rgba(139,92,246,0.12)', definition: 'A group of things, without implying part-whole relations.', examples: ['Patient cohort', 'Dataset', 'Ingredient list'], note: 'Members can be of different types.' },
  { id: 'InformationObject', color: '#06B6D4', bg: 'rgba(6,182,212,0.12)', definition: 'A representational entity — data, documents, codes, or identifiers.', examples: ['FHIR record', 'ICD-10 code', 'Lab report', 'Clinical note'], note: 'Information objects are about other entities.' },
  { id: 'TimeInstant', color: '#94A3B8', bg: 'rgba(148,163,184,0.1)', definition: 'A point in time anchoring processes temporally.', examples: ['Date of birth', 'Diagnosis date', 'Timestamp'], note: 'Includes StartTime and EndTime as subclasses.' },
];

const RELATIONS = [
  { id: 'hasPart', label: 'hasPart / isPartOf', color: '#3B82F6', domain: 'Object or Process', range: 'Object or Process', definition: 'A mereological relation between wholes and their parts.' },
  { id: 'hasParticipant', label: 'hasParticipant / isParticipantIn', color: '#F59E0B', domain: 'Process', range: 'Object', definition: 'Describes the participation of a (non-process) thing in a process.' },
  { id: 'hasFeature', label: 'hasFeature / isFeatureOf', color: '#10B981', domain: 'Object or Process', range: 'Feature', definition: 'Relates a thing to its internal, contextual, or externally attributed characteristic.' },
  { id: 'hasMember', label: 'hasMember / isItemIn', color: '#8B5CF6', domain: 'Collection', range: 'owl:Thing', definition: 'Relates a collection to an item contained therein.' },
  { id: 'atTime', label: 'atTime', color: '#94A3B8', domain: 'Process', range: 'TimeInstant', definition: 'Anchors a process to a point in time.' },
];

const USE_CASES = [
  {
    id: 'pizza', label: 'Pizza Tutorial', emoji: '🍕', audience: 'Beginners',
    tagline: 'Start with something everyone knows',
    description: 'A Margherita pizza is an Object with parts (sauce, cheese, dough). Baking is a Process with the pizza as participant. Its 30 cm diameter is a Quantity Feature. This accessible example mirrors exactly how clinical data is modeled.',
    code: `:Margherita a sulo:Object ;
    sulo:hasPart :TomatoSauce, :Mozzarella, :Dough ;
    sulo:hasFeature :Diameter30cm .

:Baking_Margherita a sulo:Process ;
    sulo:hasParticipant :Chef, :Margherita ;
    sulo:atTime :BakingStart .

:Diameter30cm a sulo:Quantity ;
    qudt:unit unit:CentiMeter ;
    qudt:value 30 .`,
    color: '#F59E0B'
  },
  {
    id: 'clinical', label: 'Clinical Integration', emoji: '🏥', audience: 'Data Engineers',
    tagline: 'FHIR · OMOP · SPHN — one shared pattern',
    description: 'Three standards, three ways to say "patient received drug X". SULO provides the semantic bridge. Map once, query anywhere — across institutions and borders without custom adapters.',
    code: `# FHIR:  MedicationAdministration.subject → Patient/123
# OMOP:  drug_exposure(person_id=123, drug_concept_id=...)
# SPHN:  :Patient123 sphn:hasAdministeredDrug :Drug456

# Unified SULO pattern with PRO design:
:DrugAdmin_789 a sulo:Process ;
    sulo:hasParticipant :InputRole ;    # direct link to role
    sulo:hasParticipant :OutputRole .   # direct link to role

# PRO pattern — role bearers
:InputRole a sulo:Role .
:Patient123 a sulo:Object ;
    sulo:hasFeature :InputRole .

:OutputRole a sulo:Role .
:MedicationOrder a sulo:InformationObject ;
    sulo:hasFeature :OutputRole ;
    sulo:refersTo :AmoxicillinAdministration .
:AmoxicillinAdministration a sulo:Feature ;
    owl:sameAs rxnorm:723 .

# inferred via role chain:
# hasParticipant ∘ isFeatureOf⁻¹ → hasParticipant
# ∴ DrugAdmin_789 hasParticipant Patient123 ✓`,
    color: '#3B82F6'
  },
  {
    id: 'query', label: 'Semantic Query', emoji: '🔍', audience: 'Researchers',
    tagline: 'Write once, query everywhere',
    description: 'Because SULO enforces consistent modeling, a single SPARQL query works across any SULO-aligned dataset — no custom mappings, no guesswork about what "hasDiagnosis" means in each system.',
    code: `# Find patients who received aspirin > 200mg
SELECT ?patient ?dose WHERE {
  ?admin a sulo:Process ;
    sulo:hasParticipant ?patient ;
    sulo:hasParticipant ?drug ;
    sulo:hasFeature ?doseNode .

  ?doseNode a sulo:Quantity ;
    qudt:value ?dose .

  ?drug owl:sameAs rxnorm:1191 .  # aspirin
  ?patient a :Patient .
  FILTER(?dose > 200)
}`,
    color: '#10B981'
  },
  {
    id: 'ai', label: 'Neurosymbolic AI', emoji: '🤖', audience: 'AI Researchers',
    tagline: 'Grounding neural models in formal semantics',
    description: 'SULO-structured knowledge graphs give neural models a consistent symbolic backbone. Formal axioms act as hard constraints — preventing hallucinated relations, enabling verified inference, and improving cross-institutional generalization.',
    code: `# SULO enables hybrid reasoning:

# 1. Neural: embed SULO graph → entity representations
#    Entities from different sources share the same types
#    → improved zero-shot transfer

# 2. Symbolic: SULO axioms as hard constraints
#    IF x hasParticipant y THEN y is an Object
#    IF x hasPart y THEN x and y are same top-level type

# 3. Verified: check outputs against ontology
#    Automated validation via OWL reasoners (HermiT, Pellet)
#    Inconsistencies flagged before downstream use`,
    color: '#8B5CF6'
  },
];

const TEAM = window.TEAM_DATA;

// ---- ANIMATED HERO CANVAS ----
const HeroCanvas = () => {
  const canvasRef = React.useRef(null);
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let animId;
    const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; };
    resize();
    window.addEventListener('resize', resize);

    const NODE_COLORS = ['#3B82F6','#F59E0B','#10B981','#8B5CF6','#06B6D4','#34D399','#94A3B8'];
    const NODE_LABELS = ['Object','Process','Feature','Role','Collection','Quantity','InformationObject'];
    const nodes = Array.from({length: 22}, (_, i) => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.4,
      vy: (Math.random() - 0.5) * 0.4,
      r: 4 + Math.random() * 5,
      color: NODE_COLORS[i % NODE_COLORS.length],
      label: i < NODE_LABELS.length ? NODE_LABELS[i] : null,
      opacity: 0.4 + Math.random() * 0.5,
    }));

    const draw = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // Draw edges
      for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
          const dx = nodes[j].x - nodes[i].x;
          const dy = nodes[j].y - nodes[i].y;
          const dist = Math.sqrt(dx*dx + dy*dy);
          if (dist < 180) {
            const alpha = (1 - dist/180) * 0.12;
            ctx.beginPath();
            ctx.moveTo(nodes[i].x, nodes[i].y);
            ctx.lineTo(nodes[j].x, nodes[j].y);
            ctx.strokeStyle = `rgba(0, 201, 167, ${alpha})`;
            ctx.lineWidth = 1;
            ctx.stroke();
          }
        }
      }
      // Draw nodes
      nodes.forEach(n => {
        ctx.beginPath();
        ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
        ctx.fillStyle = n.color + Math.round(n.opacity * 255).toString(16).padStart(2,'0');
        ctx.fill();
        // glow
        const g = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r * 3);
        g.addColorStop(0, n.color + '30');
        g.addColorStop(1, 'transparent');
        ctx.beginPath();
        ctx.arc(n.x, n.y, n.r * 3, 0, Math.PI * 2);
        ctx.fillStyle = g;
        ctx.fill();
      });
      // Update
      nodes.forEach(n => {
        n.x += n.vx; n.y += n.vy;
        if (n.x < 0 || n.x > canvas.width) n.vx *= -1;
        if (n.y < 0 || n.y > canvas.height) n.vy *= -1;
      });
      animId = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize); };
  }, []);
  return <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} />;
};

// ---- NAV ----
const SULONav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);

  const links = [
    { href: '#what', label: 'What is SULO' },
    { href: '#explore', label: 'Explorer' },
    { href: '#usecases', label: 'Use Cases' },
    { href: '#demo', label: 'AI Demo' },
    { href: '#community', label: 'Community' },
  ];

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
      background: scrolled ? 'rgba(247,249,252,0.95)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(0,0,0,0.08)' : 'none',
      transition: 'all 0.35s ease',
      padding: '0 clamp(1rem, 5vw, 3rem)',
    }}>
      <div style={{ maxWidth: 1160, margin: '0 auto', display: 'flex', alignItems: 'center', height: 64 }}>
        <a href="#top" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 10, marginRight: 'auto' }}>
          <svg width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="url(#logoGrad)"/><defs><linearGradient id="logoGrad" x1="0" y1="0" x2="32" y2="32"><stop offset="0%" stopColor="#00C9A7"/><stop offset="100%" stopColor="#0087FF"/></linearGradient></defs><text x="16" y="22" textAnchor="middle" fontFamily="Space Mono, monospace" fontWeight="700" fontSize="15" fill="white">S</text></svg>
          <span style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 18, color: '#1A2236', letterSpacing: '-0.02em' }}>SULO</span>
          <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: '#00C9A7', background: 'rgba(0,201,167,0.15)', padding: '2px 7px', borderRadius: 4, border: '1px solid rgba(0,201,167,0.3)' }}>v0.2.4</span>
        </a>
        <div style={{ display: 'flex', gap: 2, alignItems: 'center' }}>
          {links.map(l => (
            <a key={l.href} href={l.href}
              style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, fontWeight: 500, color: '#6B7FA3', textDecoration: 'none', padding: '6px 13px', borderRadius: 7, transition: 'all 0.15s' }}
              onMouseEnter={e => { e.currentTarget.style.color = '#1A2236'; e.currentTarget.style.background = 'rgba(0,0,0,0.08)'; }}
              onMouseLeave={e => { e.currentTarget.style.color = '#6B7FA3'; e.currentTarget.style.background = 'transparent'; }}
            >{l.label}</a>
          ))}
          <a href="policymakers.html"
            style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, fontWeight: 600, color: '#D97B4F', background: 'rgba(217,123,79,0.1)', border: '1px solid rgba(217,123,79,0.25)', textDecoration: 'none', padding: '6px 13px', borderRadius: 7, marginLeft: 2, transition: 'all 0.15s' }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(217,123,79,0.18)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'rgba(217,123,79,0.1)'; }}
          >For Policymakers</a>
          <a href="#download"
            style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, fontWeight: 700, color: '#fff', background: 'linear-gradient(135deg,#00C9A7,#00A0FF)', textDecoration: 'none', padding: '7px 18px', borderRadius: 8, marginLeft: 8, transition: 'opacity 0.15s', letterSpacing: '0.01em' }}
            onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
            onMouseLeave={e => e.currentTarget.style.opacity = '1'}
          >Get SULO ↓</a>
        </div>
      </div>
    </nav>
  );
};

// ---- HERO ----
const Hero = () => (
  <section id="top" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', overflow: 'hidden', background: 'radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,135,255,0.1) 0%, transparent 70%)' }}>
    <HeroCanvas />
    <div style={{ position: 'relative', zIndex: 2, maxWidth: 1160, margin: '0 auto', padding: 'clamp(5rem,10vw,8rem) clamp(1rem,5vw,3rem) 4rem', width: '100%' }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(0,201,167,0.08)', border: '1px solid rgba(0,201,167,0.25)', borderRadius: 20, padding: '5px 14px', marginBottom: 28 }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#00C9A7', display: 'inline-block', boxShadow: '0 0 8px #00C9A7' }} />
        <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00C9A7', letterSpacing: '0.08em' }}>CC0 · OWL 2 · JOWO/FOIS 2025 · Horizon Europe AIDAVA</span>
      </div>
      <h1 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 'clamp(2.8rem, 7vw, 5.5rem)', fontWeight: 800, color: '#1A2236', lineHeight: 1.05, letterSpacing: '-0.04em', margin: '0 0 24px', maxWidth: 820 }}>
        A shared language<br />
        <span style={{ background: 'linear-gradient(90deg, #00C9A7, #0087FF)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>for machine-readable data.</span>
      </h1>
      <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 'clamp(1rem, 2vw, 1.2rem)', color: '#6B7FA3', lineHeight: 1.7, maxWidth: 600, margin: '0 0 44px' }}>
        SULO is a minimal upper-level ontology — a small, formal set of building blocks that lets data from any source mean the same thing to any machine. Simple enough to adopt, rigorous enough to reason over.
      </p>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
        <a href="#explore" style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 15, color: '#fff', background: 'linear-gradient(135deg,#00C9A7,#00A0FF)', textDecoration: 'none', padding: '13px 28px', borderRadius: 10, display: 'inline-flex', alignItems: 'center', gap: 8, transition: 'transform 0.15s, box-shadow 0.15s', boxShadow: '0 4px 24px rgba(0,201,167,0.3)' }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,201,167,0.4)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 4px 24px rgba(0,201,167,0.3)'; }}
        >Explore the Ontology →</a>
        <a href="https://github.com/AIDAVA-DEV/sulo/blob/main/docs/papers/FOUST2025/SULO_FOUST2025.pdf" target="_blank" rel="noopener" style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, fontSize: 15, color: '#1A2236', background: 'rgba(0,0,0,0.08)', border: '1px solid rgba(0,0,0,0.15)', textDecoration: 'none', padding: '13px 28px', borderRadius: 10, transition: 'background 0.15s' }}
          onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,0,0,0.12)'}
          onMouseLeave={e => e.currentTarget.style.background = 'rgba(0,0,0,0.08)'}
        >Read the Paper</a>
        <a href="https://github.com/AIDAVA-DEV/sulo" target="_blank" rel="noopener" style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, fontSize: 15, color: '#6B7FA3', textDecoration: 'none', padding: '13px 20px', borderRadius: 10, display: 'inline-flex', alignItems: 'center', gap: 8, transition: 'color 0.15s' }}
          onMouseEnter={e => e.currentTarget.style.color = '#1A2236'}
          onMouseLeave={e => e.currentTarget.style.color = '#6B7FA3'}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
          GitHub
        </a>
      </div>
      <div style={{ marginTop: 72, display: 'flex', gap: 48, flexWrap: 'wrap' }}>
        {[['8', 'Core classes'],['5', 'Object properties'],['CC0', 'License'],['OWL 2', 'Standard']].map(([v,l]) => (
          <div key={l}>
            <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 28, color: '#1A2236', letterSpacing: '-0.03em' }}>{v}</div>
            <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, color: '#4A5568', marginTop: 2 }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---- PROBLEM ----
const Problem = () => {
  const sectionStyles = { maxWidth: 1160, margin: '0 auto', padding: '0 clamp(1rem,5vw,3rem)' };
  const fragCards = [
    { label: 'Database column', code: 'patient_id | diagnosis_code\n123        | E11', color: '#F59E0B' },
    { label: 'JSON API', code: '{"patientId": 123,\n "hasDiagnosis": "E11"}', color: '#3B82F6' },
    { label: 'Domain ontology', code: ':Patient123\n  ex:diagnosedWith\n  ex:T2Diabetes .', color: '#8B5CF6' },
  ];
  return (
    <section id="problem" style={{ padding: '120px 0', background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.03) 100%)' }}>
      <div style={sectionStyles}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 16 }}>
          <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#F59E0B', letterSpacing: '0.1em', textTransform: 'uppercase' }}>The Problem</span>
        </div>
        <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,4vw,3rem)', color: '#1A2236', letterSpacing: '-0.03em', margin: '0 0 16px' }}>
          Everyone models the world differently.
        </h2>
        <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 17, color: '#6B7FA3', lineHeight: 1.7, maxWidth: 640, margin: '0 0 64px' }}>
          Three systems express the same fact — a patient's diabetes diagnosis — in three incompatible ways. Machines can't reliably tell they mean the same thing.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20, marginBottom: 56 }}>
          {fragCards.map(c => (
            <div key={c.label} style={{ background: '#FFFFFF', border: `1px solid ${c.color}30`, borderRadius: 14, padding: 24, backdropFilter: 'blur(8px)' }}>
              <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: c.color, letterSpacing: '0.08em', marginBottom: 12 }}>{c.label.toUpperCase()}</div>
              <pre style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: '#475569', margin: 0, lineHeight: 1.8, whiteSpace: 'pre-wrap' }}>{c.code}</pre>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 1, background: 'rgba(0,0,0,0.05)', borderRadius: 16, overflow: 'hidden', marginBottom: 80 }}>
          {[
            { icon: '⚡', title: 'Interoperability is manual', body: 'Data integration becomes a patchwork of one-off mappings. Expensive, slow, error-prone.' },
            { icon: '🧩', title: 'Ontologies are too weak or too complex', body: 'Simple schemas lack semantics. Heavy upper ontologies have low adoption due to complexity.' },
            { icon: '🤖', title: 'AI inherits the confusion', body: 'Models trained on inconsistent data learn inconsistent patterns — poor generalization, limited trust.' },
          ].map(item => (
            <div key={item.title} style={{ padding: '32px 28px', background: '#FFFFFF' }}>
              <div style={{ fontSize: 28, marginBottom: 14 }}>{item.icon}</div>
              <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 16, color: '#1A2236', marginBottom: 8 }}>{item.title}</div>
              <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: '#4A5568', lineHeight: 1.65 }}>{item.body}</div>
            </div>
          ))}
        </div>

        <div style={{ background: 'linear-gradient(135deg, rgba(0,201,167,0.06) 0%, rgba(0,135,255,0.06) 100%)', border: '1px solid rgba(0,201,167,0.2)', borderRadius: 16, padding: '40px 44px', display: 'flex', flexWrap: 'wrap', gap: 32, alignItems: 'center' }}>
          <div style={{ flex: '1 1 380px' }}>
            <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00C9A7', letterSpacing: '0.08em', marginBottom: 12 }}>THE SULO APPROACH</div>
            <h3 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 24, color: '#1A2236', letterSpacing: '-0.02em', margin: '0 0 12px' }}>
              Same diagnosis, one shared pattern.
            </h3>
            <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 15, color: '#6B7FA3', lineHeight: 1.7, margin: 0 }}>
              SULO provides a minimal, formal "grammar of meaning" — simple enough to adopt correctly, rigorous enough for machines to reason over. Instead of inventing new relations, everyone reuses the same small vocabulary.
            </p>
          </div>
          <div style={{ flex: '1 1 280px', background: 'rgba(0,0,0,0.3)', borderRadius: 10, padding: 20 }}>
            <pre style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: '#475569', margin: 0, lineHeight: 1.9 }}>
<span style={{color:'#00C9A7'}}>:Diagnosis_event</span> a sulo:<span style={{color:'#F59E0B'}}>Process</span> ;{'\n'}{'  '}sulo:hasParticipant :<span style={{color:'#34D399'}}>InputRole</span> ;{'   '}<span style={{color:'#4A5568'}}># direct link to role</span>{'\n'}{'  '}sulo:hasParticipant :<span style={{color:'#6EE7B7'}}>OutputRole</span> .{'  '}<span style={{color:'#4A5568'}}># direct link to role</span>{'\n'}{'\n'}<span style={{color:'#4A5568'}}># PRO pattern — role bearers</span>{'\n'}<span style={{color:'#34D399'}}>:InputRole</span> a sulo:<span style={{color:'#34D399'}}>Role</span> .{'\n'}<span style={{color:'#3B82F6'}}>:Patient123</span> a sulo:<span style={{color:'#3B82F6'}}>Object</span> ;{'\n'}{'  '}sulo:hasFeature :<span style={{color:'#34D399'}}>InputRole</span> .{'\n'}{'\n'}<span style={{color:'#6EE7B7'}}>:OutputRole</span> a sulo:<span style={{color:'#6EE7B7'}}>Role</span> .{'\n'}<span style={{color:'#06B6D4'}}>:DiagnosisStatement</span> a sulo:<span style={{color:'#06B6D4'}}>InformationObject</span> ;{'\n'}{'  '}sulo:hasFeature :<span style={{color:'#6EE7B7'}}>OutputRole</span> ;{'\n'}{'  '}sulo:refersTo :<span style={{color:'#10B981'}}>DiabetesType2Condition</span> .{'\n'}{'\n'}<span style={{color:'#4A5568'}}># inferred via role chain:</span>{'\n'}<span style={{color:'#4A5568'}}># hasParticipant ∘ isFeatureOf⁻¹ → hasParticipant</span>{'\n'}<span style={{color:'#4A5568'}}># ∴ Diagnosis_event hasParticipant Patient123 ✓</span>
</pre>
          </div>
        </div>
      </div>
    </section>
  );
};


// ---- CLASS HIERARCHY TREE DATA ----
const TREE_LIST = [
  { id: 'owl:Thing',         color: '#64748B', indent: 0,                          def: 'The universal top-level OWL class. Every SULO class is a subclass of owl:Thing.', examples: ['Any entity'] },
  { id: 'Process',           color: '#F59E0B', indent: 1, parent: 'owl:Thing',     def: 'Something that unfolds over time, with participants.', examples: ['Diagnosis', 'Drug administration', 'Baking'] },
  { id: 'Object',            color: '#3B82F6', indent: 1, parent: 'owl:Thing',     def: 'Any physical or non-physical thing that exists independently.', examples: ['Patient', 'Drug', 'Pizza', 'Gene'] },
  { id: 'SpatialObject',     color: '#60A5FA', indent: 2, parent: 'Object',        def: 'An object that occupies space. Subclass of Object.', examples: ['Organ', 'Building', 'Region'] },
  { id: 'Feature',           color: '#10B981', indent: 2, parent: 'Object',        def: 'An intrinsic, contextual, or attributed characteristic of an object or process. Subclass of Object.', examples: ['Severity', 'Color', 'Blood pressure'] },
  { id: 'Role',              color: '#34D399', indent: 3, parent: 'Feature',       def: 'A contextual function played by an object. Subclass of Feature.', examples: ['Patient role', 'Prescriber role'] },
  { id: 'Quality',           color: '#6EE7B7', indent: 3, parent: 'Feature',       def: 'An intrinsic property of an object. Subclass of Feature.', examples: ['Color', 'Mass', 'Charge'] },
  { id: 'Capability',        color: '#A7F3D0', indent: 3, parent: 'Feature',       def: 'A disposition or power of an object. Subclass of Feature.', examples: ['Solubility', 'Drug resistance'] },
  { id: 'InformationObject', color: '#06B6D4', indent: 3, parent: 'Feature',       def: 'A representational entity — data, codes, documents. Subclass of Feature.', examples: ['ICD-10 code', 'FHIR record', 'Lab report'] },
  { id: 'Collection',        color: '#8B5CF6', indent: 4, parent: 'InformationObject', def: 'A group of things without implying part-whole relations. Subclass of InformationObject.', examples: ['Cohort', 'Dataset', 'Ingredient list'] },
  { id: 'Quantity',          color: '#C4B5FD', indent: 4, parent: 'InformationObject', def: 'A measurable amount expressed as a value and unit. Subclass of InformationObject.', examples: ['500 mg', '37 °C', '30 cm'] },
  { id: 'Unit',              color: '#DDD6FE', indent: 5, parent: 'Quantity',      def: 'A unit of measurement. Subclass of Quantity.', examples: ['mg', 'kg', 'mL', 'mmHg'] },
  { id: 'Time',              color: '#94A3B8', indent: 5, parent: 'Quantity',      def: 'A temporal entity anchoring processes. Subclass of Quantity.', examples: ['Date of birth', 'Diagnosis date', 'Duration'] },
  { id: 'Duration',          color: '#94A3B8', indent: 6, parent: 'Time',          def: 'A span of time between two instants. Subclass of Time.', examples: ['Length of hospital stay', 'Treatment duration'] },
  { id: 'TimeInterval',      color: '#CBD5E1', indent: 6, parent: 'Time',          def: 'A time interval with hasPart self-loop. Subclass of Time.', examples: ['Hospital stay', 'Treatment period'] },
  { id: 'TimeInstant',       color: '#E2E8F0', indent: 6, parent: 'Time',          def: 'A point in time. Subclass of Time.', examples: ['Date of birth', 'Diagnosis date'] },
  { id: 'StartTime',         color: '#F8FAFC', indent: 7, parent: 'TimeInstant',   def: 'The start of a time interval or process.', examples: ['Admission date', 'Treatment start'] },
  { id: 'EndTime',           color: '#F8FAFC', indent: 7, parent: 'TimeInstant',   def: 'The end of a time interval or process.', examples: ['Discharge date', 'Treatment end'] },
];

const TREE_CROSS_EDGES = [
  { from: 'Process',  to: 'Object',            label: 'hasParticipant', color: '#3B82F6' },
  { from: 'Object',   to: 'Feature',           label: 'hasFeature',     color: '#10B981' },
  { from: 'Process',  to: 'Feature',           label: 'hasFeature',     color: '#10B981' },
  { from: 'InformationObject', to: 'owl:Thing',label: 'refersTo',       color: '#06B6D4' },
  { from: 'Collection', to: 'owl:Thing',       label: 'hasItem',        color: '#8B5CF6' },
  { from: 'Process',  to: 'Time',              label: 'atTime',         color: '#94A3B8' },
];

// ---- BUILDING BLOCKS ----
const BuildingBlocks = () => {
  const [sel, setSel] = React.useState(null);
  const selNode = sel ? TREE_LIST.find(n => n.id === sel) : null;
  const relatedEdges = sel ? TREE_CROSS_EDGES.filter(e => e.from === sel || e.to === sel) : [];

  return (
    <section id="what" style={{ padding: '120px 0' }}>
      <div style={{ maxWidth: 1160, margin: '0 auto', padding: '0 clamp(1rem,5vw,3rem)' }}>
        <div style={{ marginBottom: 16 }}>
          <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00C9A7', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Class Hierarchy</span>
        </div>
        <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,4vw,3rem)', color: '#1A2236', letterSpacing: '-0.03em', margin: '0 0 12px' }}>
          The SULO class tree.
        </h2>
        <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 17, color: '#6B7FA3', lineHeight: 1.7, maxWidth: 560, margin: '0 0 40px' }}>
          Indented rows show <em>subClassOf</em>. Click any class to see its definition, examples, and object property connections.
        </p>

        {/* Tree list + panel: panel LEFT, tree RIGHT */}
        <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 20, alignItems: 'start', marginBottom: 48 }}>

          {/* Detail panel — sticky left */}
          <div style={{ background: 'rgba(10,14,28,0.9)', border: '1px solid rgba(0,0,0,0.1)', borderRadius: 14, padding: '24px 20px', position: 'sticky', top: 80, minHeight: 200 }}>
            {selNode ? (
              <>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                  <div style={{ width: 10, height: 10, borderRadius: '50%', background: selNode.color, boxShadow: `0 0 10px ${selNode.color}`, flexShrink: 0 }} />
                  <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, fontWeight: 700, color: selNode.color }}>{selNode.id}</span>
                </div>
                {selNode.parent && (
                  <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: '#94A3B8', marginBottom: 12 }}>subClassOf {selNode.parent}</div>
                )}
                <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, color: '#475569', lineHeight: 1.65, margin: '0 0 16px' }}>{selNode.def}</p>
                <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: selNode.color + 'AA', marginBottom: 8 }}>EXAMPLES</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 5, marginBottom: relatedEdges.length ? 18 : 0 }}>
                  {selNode.examples.map(ex => (
                    <span key={ex} style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#6B7FA3', background: 'rgba(0,0,0,0.05)', border: `1px solid ${selNode.color}20`, padding: '4px 10px', borderRadius: 5 }}>{ex}</span>
                  ))}
                </div>
                {relatedEdges.length > 0 && (
                  <>
                    <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: selNode.color + 'AA', marginBottom: 8 }}>PROPERTIES</div>
                    {relatedEdges.map((e, i) => (
                      <div key={i} style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#6B7FA3', marginBottom: 6, lineHeight: 1.5 }}>
                        <span style={{ color: e.color }}>{e.from}</span>
                        <span style={{ color: '#94A3B8' }}> —{e.label}→ </span>
                        <span style={{ color: e.color + 'CC' }}>{e.to}</span>
                      </div>
                    ))}
                  </>
                )}
              </>
            ) : (
              <div style={{ textAlign: 'center', paddingTop: 56 }}>
                <div style={{ fontSize: 28, marginBottom: 12, opacity: 0.15 }}>◉</div>
                <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, color: '#8896B0', lineHeight: 1.6 }}>Click any class<br/>to explore</div>
              </div>
            )}
          </div>

          {/* Indented tree */}
          <div style={{ background: 'rgba(10,14,28,0.8)', border: '1px solid rgba(0,0,0,0.1)', borderRadius: 16, padding: '24px 20px' }}>
            {TREE_LIST.map((node, i) => {
              const isSel = sel === node.id;
              const isDim = sel && !isSel;
              const prevIndent = i > 0 ? (TREE_LIST[i-1].indent || 0) : 0;
              const nextIndent = i < TREE_LIST.length - 1 ? (TREE_LIST[i+1].indent || 0) : 0;
              return (
                <div key={node.id} style={{ display: 'flex', alignItems: 'center', paddingLeft: node.indent * 24, marginBottom: 5, marginTop: node.indent === 0 && i > 0 ? 6 : 0, cursor: 'pointer', opacity: isDim ? 0.4 : 1, transition: 'opacity 0.2s' }}
                  onClick={() => setSel(isSel ? null : node.id)}>
                  {node.indent > 0 && (
                    <div style={{ width: 12, height: 1, background: node.color + '50', marginRight: 6, flexShrink: 0 }} />
                  )}
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: isSel ? node.color + '20' : 'rgba(0,0,0,0.04)', border: `1px solid ${isSel ? node.color + '55' : node.color + '22'}`, borderRadius: 8, padding: '8px 14px', transition: 'all 0.15s', flex: '0 0 auto' }}
                    onMouseEnter={e => { if (!isSel) { e.currentTarget.style.background = node.color + '12'; e.currentTarget.style.borderColor = node.color + '40'; }}}
                    onMouseLeave={e => { if (!isSel) { e.currentTarget.style.background = 'rgba(0,0,0,0.04)'; e.currentTarget.style.borderColor = node.color + '22'; }}}>
                    <div style={{ width: 8, height: 8, borderRadius: '50%', background: node.color, boxShadow: isSel ? `0 0 8px ${node.color}` : 'none', flexShrink: 0 }} />
                    <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, fontWeight: 600, color: isSel ? node.color : node.color + 'DD', whiteSpace: 'nowrap' }}>{node.id}</span>
                  </div>
                  {node.parent && (
                    <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: '#8896B0', marginLeft: 10 }}>⊂ {node.parent}</span>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {/* Object Properties */}
        <div style={{ marginBottom: 16 }}>
          <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00C9A7', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Object Properties</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 12 }}>
          {RELATIONS.map(rel => (
            <div key={rel.id} style={{ background: '#FFFFFF', border: '1px solid rgba(0,0,0,0.08)', borderRadius: 10, padding: '16px 20px', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{ width: 2, borderRadius: 2, background: rel.color, alignSelf: 'stretch', flexShrink: 0, minHeight: 40 }} />
              <div>
                <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: rel.color, marginBottom: 4 }}>{rel.label}</div>
                <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, color: '#6B7FA3', lineHeight: 1.6 }}>{rel.definition}</div>
                <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#94A3B8', marginTop: 6 }}>{rel.domain} → {rel.range}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---- USE CASES ----
const UseCases = () => {
  const [tab, setTab] = React.useState('pizza');
  const uc = USE_CASES.find(u => u.id === tab);
  const sectionStyles = { maxWidth: 1160, margin: '0 auto', padding: '0 clamp(1rem,5vw,3rem)' };
  return (
    <section id="usecases" style={{ padding: '120px 0', background: 'rgba(0,0,0,0.03)' }}>
      <div style={sectionStyles}>
        <div style={{ marginBottom: 16 }}>
          <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00C9A7', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Use Cases</span>
        </div>
        <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,4vw,3rem)', color: '#1A2236', letterSpacing: '-0.03em', margin: '0 0 48px' }}>
          SULO in practice.
        </h2>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 40 }}>
          {USE_CASES.map(u => (
            <button key={u.id} onClick={() => setTab(u.id)}
              style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, fontSize: 14, color: tab === u.id ? '#fff' : '#6B7FA3', background: tab === u.id ? u.color : 'rgba(0,0,0,0.05)', border: `1px solid ${tab === u.id ? u.color : 'rgba(0,0,0,0.1)'}`, padding: '9px 18px', borderRadius: 8, cursor: 'pointer', transition: 'all 0.15s' }}
            >{u.emoji} {u.label}</button>
          ))}
        </div>
        {uc && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'start' }}>
            <div style={{ background: '#FFFFFF', border: `1px solid ${uc.color}25`, borderRadius: 14, padding: '32px 36px' }}>
              <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: uc.color, letterSpacing: '0.08em', marginBottom: 12 }}>{uc.audience.toUpperCase()}</div>
              <h3 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 22, color: '#1A2236', letterSpacing: '-0.02em', margin: '0 0 8px' }}>{uc.tagline}</h3>
              <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 15, color: '#6B7FA3', lineHeight: 1.7, margin: '0 0 24px' }}>{uc.description}</p>
              {uc.id === 'pizza' && (
                <a href="https://github.com/MaastrichtU-IDS/sulo-tutorial" target="_blank" rel="noopener"
                  style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, fontSize: 13, color: uc.color, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  Try the notebook tutorial →
                </a>
              )}
            </div>
            <div style={{ background: 'rgba(0,0,0,0.4)', border: '1px solid rgba(0,0,0,0.1)', borderRadius: 14, padding: '28px 32px' }}>
              <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#94A3B8', marginBottom: 14, display: 'flex', justifyContent: 'space-between' }}>
                <span>turtle</span>
                <span style={{ color: uc.color }}>SULO pattern</span>
              </div>
              <pre style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: '#6B7FA3', margin: 0, lineHeight: 1.9, overflowX: 'auto', whiteSpace: 'pre-wrap' }}>{uc.code}</pre>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

// ---- TUTORIALS ----
const Tutorials = () => {
  const sectionStyles = { maxWidth: 1160, margin: '0 auto', padding: '0 clamp(1rem,5vw,3rem)' };
  const tutorials = [
    { title: 'SULO Introduction', desc: 'What SULO is, its design principles, and the minimal vocabulary. Start here.', tag: 'Beginner', nb: '01_sulo_intro.ipynb' },
    { title: 'Pizza Knowledge Graph', desc: 'Build a Margherita pizza KG from scratch using SULO classes and relations.', tag: 'Beginner', nb: '02_pizza_kg.ipynb' },
    { title: 'Clinical Data Modeling', desc: 'Map FHIR and OMOP patient data to SULO patterns. Integrate two datasets.', tag: 'Intermediate', nb: '03_clinical_kg.ipynb' },
    { title: 'SPARQL Queries over SULO', desc: 'Write semantic queries that work across SULO-aligned datasets.', tag: 'Intermediate', nb: '04_sparql_queries.ipynb' },
  ];
  return (
    <section id="tutorials" style={{ padding: '120px 0' }}>
      <div style={sectionStyles}>
        <div style={{ marginBottom: 16 }}><span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00C9A7', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Tutorials</span></div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, alignItems: 'flex-end', marginBottom: 48 }}>
          <div>
            <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,4vw,3rem)', color: '#1A2236', letterSpacing: '-0.03em', margin: 0 }}>Learn by doing.</h2>
            <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 17, color: '#6B7FA3', lineHeight: 1.7, maxWidth: 500, margin: '12px 0 0' }}>Interactive Jupyter notebooks — run in your browser, no setup needed.</p>
          </div>
          <a href="https://github.com/MaastrichtU-IDS/sulo-tutorial" target="_blank" rel="noopener"
            style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, fontSize: 14, color: '#1A2236', background: 'rgba(0,0,0,0.08)', border: '1px solid rgba(0,0,0,0.15)', textDecoration: 'none', padding: '10px 20px', borderRadius: 8, display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
            All Tutorials on GitHub
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 14 }}>
          {tutorials.map((t, i) => (
            <a key={t.title} href="https://github.com/MaastrichtU-IDS/sulo-tutorial" target="_blank" rel="noopener"
              style={{ textDecoration: 'none', background: '#FFFFFF', border: '1px solid rgba(0,0,0,0.1)', borderRadius: 12, padding: '24px 26px', transition: 'border-color 0.15s, transform 0.15s', display: 'block' }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(0,201,167,0.3)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(0,0,0,0.1)'; e.currentTarget.style.transform = 'none'; }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
                <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#94A3B8' }}>0{i+1}</span>
                <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: t.tag === 'Beginner' ? '#10B981' : '#F59E0B', background: t.tag === 'Beginner' ? 'rgba(16,185,129,0.1)' : 'rgba(245,158,11,0.1)', padding: '2px 8px', borderRadius: 4, border: `1px solid ${t.tag === 'Beginner' ? 'rgba(16,185,129,0.3)' : 'rgba(245,158,11,0.3)'}` }}>{t.tag}</span>
              </div>
              <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 15, color: '#1A2236', marginBottom: 8 }}>{t.title}</div>
              <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, color: '#4A5568', lineHeight: 1.6 }}>{t.desc}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---- COUNTDOWN ----
const Countdown = () => {
  const getNextFirstWed = () => {
    const now = new Date();
    let d = new Date(now.getFullYear(), now.getMonth(), 1);
    while (d.getDay() !== 3) d.setDate(d.getDate() + 1);
    d.setHours(15, 0, 0, 0); // 15:00 local
    if (d <= now) {
      d = new Date(now.getFullYear(), now.getMonth() + 1, 1);
      while (d.getDay() !== 3) d.setDate(d.getDate() + 1);
      d.setHours(15, 0, 0, 0);
    }
    return d;
  };
  const [timeLeft, setTimeLeft] = React.useState({ d: '--', h: '--', m: '--', s: '--' });
  const [nextDate, setNextDate] = React.useState('');
  React.useEffect(() => {
    const target = getNextFirstWed();
    setNextDate(target.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }));
    const tick = () => {
      const diff = target - new Date();
      if (diff <= 0) { setTimeLeft({ d: 0, h: 0, m: 0, s: 0 }); return; }
      setTimeLeft({
        d: Math.floor(diff / 86400000),
        h: Math.floor((diff % 86400000) / 3600000),
        m: Math.floor((diff % 3600000) / 60000),
        s: Math.floor((diff % 60000) / 1000),
      });
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{ background: 'rgba(0,201,167,0.05)', border: '1px solid rgba(0,201,167,0.18)', borderRadius: 14, padding: '24px 28px', marginBottom: 32 }}>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: '#00C9A7', letterSpacing: '0.1em', marginBottom: 8 }}>NEXT MONTHLY MEETING</div>
          <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, fontSize: 15, color: '#1A2236' }}>{nextDate}</div>
        </div>
        <div style={{ display: 'flex', gap: 20, alignItems: 'flex-end' }}>
          {[['d','Days'],['h','Hrs'],['m','Min'],['s','Sec']].map(([k, l]) => (
            <div key={k} style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'Space Mono, monospace', fontWeight: 700, fontSize: 32, color: '#00C9A7', lineHeight: 1, minWidth: 52, textAlign: 'center' }}>
                {String(timeLeft[k]).padStart(2, '0')}
              </div>
              <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 11, color: '#94A3B8', marginTop: 4 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ---- COMMUNITY ----
const Community = () => {
  const sectionStyles = { maxWidth: 1160, margin: '0 auto', padding: '0 clamp(1rem,5vw,3rem)' };
  return (
    <section id="community" style={{ padding: '120px 0', background: 'rgba(0,0,0,0.03)' }}>
      <div style={sectionStyles}>
        <div style={{ marginBottom: 16 }}><span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00C9A7', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Community</span></div>
        <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,4vw,3rem)', color: '#1A2236', letterSpacing: '-0.03em', margin: '0 0 40px' }}>Get involved.</h2>
        <Countdown />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20 }}>
          <div style={{ background: 'linear-gradient(135deg, rgba(0,201,167,0.08) 0%, rgba(0,135,255,0.05) 100%)', border: '1px solid rgba(0,201,167,0.2)', borderRadius: 16, padding: '36px 36px' }}>
            <div style={{ fontSize: 32, marginBottom: 16 }}>📅</div>
            <h3 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 20, color: '#1A2236', margin: '0 0 10px' }}>Monthly Working Sessions</h3>
            <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: '#6B7FA3', lineHeight: 1.65, margin: '0 0 20px' }}>
              Every <strong style={{color:'#00C9A7'}}>first Wednesday of the month</strong>, the SULO community meets to work through use cases, discuss modeling patterns, and shape the ontology together. All levels welcome.
            </p>
            <a href="https://teams.microsoft.com/l/meetup-join/19%3ameeting_ZDQ0NjY5NmUtNzNkOC00ZGVkLWJlZDEtN2QzN2E5MTFiNDgz%40thread.v2/0?context=%7b%22Tid%22%3a%2263ac4101-dd05-4771-bcd6-2e2a5421e5fa%22%2c%22Oid%22%3a%224edb4e46-4548-4c27-98a6-ef3f6e2a6a88%22%7d" target="_blank" rel="noopener"
              style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, fontSize: 13, color: '#fff', background: '#00C9A7', textDecoration: 'none', padding: '10px 20px', borderRadius: 8, display: 'inline-block' }}>
              Join on Microsoft Teams →
            </a>
          </div>
          <div style={{ background: '#FFFFFF', border: '1px solid rgba(0,0,0,0.1)', borderRadius: 16, padding: '36px 36px' }}>
            <div style={{ fontSize: 32, marginBottom: 16 }}>💬</div>
            <h3 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 20, color: '#1A2236', margin: '0 0 10px' }}>Slack Community</h3>
            <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: '#6B7FA3', lineHeight: 1.65, margin: '0 0 20px' }}>
              Ask questions, share modeling patterns, and connect with others building with SULO. Active discussion across healthcare, research, and AI communities.
            </p>
            <a href="https://sulotalk.slack.com" target="_blank" rel="noopener"
              style={{ fontFamily: 'Space Mono, monospace', fontSize: 13, color: '#00C9A7', textDecoration: 'none' }}>
              sulotalk.slack.com →
            </a>
          </div>
          <div style={{ background: '#FFFFFF', border: '1px solid rgba(0,0,0,0.1)', borderRadius: 16, padding: '36px 36px' }}>
            <div style={{ fontSize: 32, marginBottom: 16 }}>🔧</div>
            <h3 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 20, color: '#1A2236', margin: '0 0 10px' }}>Contribute on GitHub</h3>
            <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: '#6B7FA3', lineHeight: 1.65, margin: '0 0 20px' }}>
              Open issues, propose new modeling patterns, submit use cases, or improve the tutorials. SULO is built by the community, for the community.
            </p>
            <a href="https://github.com/AIDAVA-DEV/sulo/issues" target="_blank" rel="noopener"
              style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, fontSize: 13, color: '#1A2236', background: 'rgba(0,0,0,0.1)', border: '1px solid rgba(0,0,0,0.15)', textDecoration: 'none', padding: '10px 20px', borderRadius: 8, display: 'inline-block' }}>
              Open an Issue
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---- PUBLICATIONS ----
const Publications = () => {
  const sectionStyles = { maxWidth: 1160, margin: '0 auto', padding: '0 clamp(1rem,5vw,3rem)' };
  return (
    <section id="publications" style={{ padding: '120px 0' }}>
      <div style={sectionStyles}>
        <div style={{ marginBottom: 16 }}><span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00C9A7', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Publication</span></div>
        <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,4vw,3rem)', color: '#1A2236', letterSpacing: '-0.03em', margin: '0 0 48px' }}>Cite SULO.</h2>
        <div style={{ background: '#FFFFFF', border: '1px solid rgba(0,0,0,0.1)', borderRadius: 16, padding: '36px 40px', maxWidth: 820 }}>
          <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 16, color: '#1A2236', lineHeight: 1.7, marginBottom: 16 }}>
            <strong>Dumontier, M., Çelebi, R., Gilani, K., de Zegher, I., Serafimova, K., Martínez Costa, C., &amp; Schulz, S.</strong>
          </div>
          <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 15, color: '#6B7FA3', lineHeight: 1.7, marginBottom: 8, fontStyle: 'italic' }}>SULO - a simplified upper-level ontology.</div>
          <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: '#4A5568', lineHeight: 1.6, marginBottom: 24 }}>
            Proceedings of the Joint Ontology Workshops (JOWO) — Episode XI: The Sicilian Summer under the Etna, co-located with the 15th International Conference on Formal Ontology in Information Systems (FOIS 2025), September 8–9, 2025, Catania, Italy.
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="https://ceur-ws.org/Vol-3882/jowo-paper-7.pdf" target="_blank" rel="noopener"
              style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, fontSize: 13, color: '#fff', background: '#00C9A7', textDecoration: 'none', padding: '9px 18px', borderRadius: 8 }}>
              Read the Paper
            </a>
            <button onClick={() => {
              const bib = `@inproceedings{dumontier2025sulo,
  title     = {SULO - a simplified upper-level ontology},
  author    = {Dumontier, Michel and {\\c{C}}elebi, Remzi and Gilani, Komal and de Zegher, Isabelle and Serafimova, Katerina and {Mart\\'{i}nez Costa}, Catalina and Schulz, Stefan},
  booktitle = {Proceedings of the Joint Ontology Workshops (JOWO) 2025},
  year      = {2025},
  venue     = {Catania, Italy}
}`;
              navigator.clipboard.writeText(bib).catch(() => {});
            }}
              style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, fontSize: 13, color: '#1A2236', background: 'rgba(0,0,0,0.1)', border: '1px solid rgba(0,0,0,0.15)', padding: '9px 18px', borderRadius: 8, cursor: 'pointer' }}>
              Copy BibTeX
            </button>
            <a href="https://aidava-dev.github.io/sulo/index.html" target="_blank" rel="noopener"
              style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, fontSize: 13, color: '#6B7FA3', textDecoration: 'none', padding: '9px 18px', borderRadius: 8, border: '1px solid rgba(0,0,0,0.1)', background: 'transparent' }}>
              Auto-generated Docs
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---- DOWNLOAD ----
const Download = () => {
  const sectionStyles = { maxWidth: 1160, margin: '0 auto', padding: '0 clamp(1rem,5vw,3rem)' };
  const formats = [
    { fmt: 'Turtle', ext: '.ttl', mime: 'text/turtle', color: '#10B981', desc: 'Most readable. Recommended.' },
    { fmt: 'JSON-LD', ext: '.jsonld', mime: 'application/ld+json', color: '#F59E0B', desc: 'For web & REST APIs.' },
    { fmt: 'RDF/XML', ext: '.rdf', mime: 'application/rdf+xml', color: '#3B82F6', desc: 'Legacy tooling.' },
    { fmt: 'N-Triples', ext: '.nt', mime: 'application/n-triples', color: '#8B5CF6', desc: 'Streaming & large datasets.' },
  ];
  return (
    <section id="download" style={{ padding: '120px 0', background: 'linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,40,100,0.05) 100%)' }}>
      <div style={sectionStyles}>
        <div style={{ marginBottom: 16 }}><span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00C9A7', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Get SULO</span></div>
        <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,4vw,3rem)', color: '#1A2236', letterSpacing: '-0.03em', margin: '0 0 48px' }}>Download the ontology.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 14, marginBottom: 48 }}>
          {formats.map(f => (
            <a key={f.fmt} href={`https://w3id.org/sulo`} target="_blank" rel="noopener"
              style={{ textDecoration: 'none', background: '#FFFFFF', border: `1px solid ${f.color}25`, borderRadius: 12, padding: '24px 24px', transition: 'all 0.15s', display: 'block' }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = f.color + '60'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = f.color + '25'; e.currentTarget.style.transform = 'none'; }}
            >
              <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 18, color: f.color, marginBottom: 10 }}>{f.ext}</div>
              <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 16, color: '#1A2236', marginBottom: 6 }}>{f.fmt}</div>
              <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 12, color: '#4A5568' }}>{f.desc}</div>
            </a>
          ))}
        </div>
        <div style={{ background: 'rgba(0,0,0,0.4)', border: '1px solid rgba(0,0,0,0.1)', borderRadius: 12, padding: '20px 24px', display: 'inline-block' }}>
          <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#94A3B8', marginBottom: 10 }}>CONTENT NEGOTIATION</div>
          <pre style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: '#6B7FA3', margin: 0, lineHeight: 2 }}>
            {`curl -L -H "Accept: text/turtle" https://w3id.org/sulo\ncurl -L -H "Accept: application/ld+json" https://w3id.org/sulo`}
          </pre>
        </div>
      </div>
    </section>
  );
};

// ---- TEAM ----
const Team = () => {
  const sectionStyles = { maxWidth: 1160, margin: '0 auto', padding: '0 clamp(1rem,5vw,3rem)' };
  return (
    <section id="team" style={{ padding: '120px 0' }}>
      <div style={sectionStyles}>
        <div style={{ marginBottom: 16 }}><span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00C9A7', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Team</span></div>
        <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,4vw,3rem)', color: '#1A2236', letterSpacing: '-0.03em', margin: '0 0 12px' }}>The people behind SULO.</h2>
        <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 16, color: '#6B7FA3', margin: '0 0 48px' }}>Supported by the AIDAVA project (GA 101057062), European Union Horizon Europe.</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(210px, 1fr))', gap: 14 }}>
          {TEAM.map((m, i) => (
            <div key={m.name} style={{ background: '#FFFFFF', border: '1px solid rgba(0,0,0,0.08)', borderRadius: 12, padding: '22px 24px', transition: 'border-color 0.15s' }}
              onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(0,0,0,0.18)'}
              onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(0,0,0,0.08)'}
            >
              <div style={{ width: 44, height: 44, borderRadius: 10, background: `hsl(${i * 60 + 160}, 55%, 22%)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 16, color: `hsl(${i * 60 + 160}, 75%, 65%)`, marginBottom: 14 }}>
                {m.name.split(' ').map(n => n[0]).slice(0,2).join('')}
              </div>
              <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 14, color: '#1A2236', marginBottom: 3 }}>{m.name}</div>
              <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 12, color: '#4A5568', marginBottom: 3 }}>{m.affil}</div>
              <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#94A3B8', marginBottom: 10 }}>{m.role}</div>
              {m.orcid && (
                <a href={m.url} target="_blank" rel="noopener"
                  style={{ display: 'inline-flex', alignItems: 'center', gap: 5, textDecoration: 'none', fontFamily: 'Space Mono, monospace', fontSize: 10, color: '#00C9A7', background: 'rgba(0,201,167,0.08)', border: '1px solid rgba(0,201,167,0.2)', padding: '3px 8px', borderRadius: 4, transition: 'background 0.15s' }}
                  onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,201,167,0.16)'}
                  onMouseLeave={e => e.currentTarget.style.background = 'rgba(0,201,167,0.08)'}
                >
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" style={{flexShrink:0}}><circle cx="12" cy="12" r="11" stroke="currentColor" strokeWidth="2"/><path d="M10 8h1v8h-1M13 8h1.5a2.5 2.5 0 010 5H13V8z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
                  {m.orcid}
                </a>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---- FOOTER ----
const Footer = () => (
  <footer style={{ padding: '48px clamp(1rem,5vw,3rem)', borderTop: '1px solid rgba(0,0,0,0.08)', background: 'rgba(247,249,252,0.9)' }}>
    <div style={{ maxWidth: 1160, margin: '0 auto', display: 'flex', flexWrap: 'wrap', gap: 24, alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 16, color: '#1A2236' }}>SULO</span>
        <span style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, color: '#94A3B8' }}>Simplified Upper Level Ontology · CC0 License</span>
      </div>
      <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
        {[['GitHub','https://github.com/AIDAVA-DEV/sulo'],['Tutorials','https://github.com/MaastrichtU-IDS/sulo-tutorial'],['Docs','https://aidava-dev.github.io/sulo/'],['Paper','https://ceur-ws.org/Vol-3882/jowo-paper-7.pdf']].map(([l,h]) => (
          <a key={l} href={h} target="_blank" rel="noopener" style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, color: '#4A5568', textDecoration: 'none' }}
            onMouseEnter={e => e.currentTarget.style.color = '#1A2236'}
            onMouseLeave={e => e.currentTarget.style.color = '#4A5568'}
          >{l}</a>
        ))}
      </div>
    </div>
  </footer>
);

Object.assign(window, { SULONav, Hero, Problem, BuildingBlocks, UseCases, Tutorials, Community, Publications, Download, Team, Footer, SULO_CLASSES, Countdown });
