// AboutContent.jsx — about page content
const AboutContent = () => {
  const principles = [
    {
      eye: '// 01',
      t: 'Move fast',
      d: 'Action brings information; the market teaches faster than any whiteboard. Our stack is a single Rust binary with YAML pipelines and REST out of the box, built so we can run bold experiments and ship the same day.',
    },
    {
      eye: '// 02',
      t: 'Customer obsession',
      d: 'We are obsessed with the teams putting agents into production, not with our competitors. Every feature we ship came from someone we are actively building with.',
    },
    {
      eye: '// 03',
      t: 'Agents are users',
      d: 'Every surface (CLI, REST, skills, MCP) is shaped for the way an agent actually calls tools, not how a human browses a dashboard. Schemas an agent can read, outputs it can parse, writes it can trust.',
    },
    {
      eye: '// 04',
      t: 'Trust by construction',
      d: 'Permissions, audit and review are not features bolted on at the end. Every path an agent can take goes through the same governed gate, and the engine itself is open for anyone to inspect.',
    },
  ];

  return (
    <>
      {/* Hero */}
      <section style={{ padding: '120px 32px 80px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(rgba(125,211,252,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(125,211,252,0.06) 1px, transparent 1px)',
          backgroundSize: '32px 32px',
          maskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 85%)',
          WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 85%)',
          pointerEvents: 'none',
        }} />
        <div style={{ position: 'relative', maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
            letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
            color: '#2ee89a', marginBottom: 20,
          }}>About SkardiLabs</div>
          <h1 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(48px, 6vw, 80px)', fontWeight: 700,
            letterSpacing: '-0.03em', lineHeight: 1.02, margin: 0, marginBottom: 32,
            color: '#e6eef9', textWrap: 'balance',
          }}>
            Building the{' '}
            <span style={{
              background: 'linear-gradient(90deg, #2ec47a 0%, #1a8fe0 100%)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            }}>context layer</span><br/>
            the agent era needs
          </h1>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 20, lineHeight: 1.6,
            color: '#8ea3c0', margin: '0 auto', maxWidth: 720, textWrap: 'pretty',
          }}>
            SkardiLabs builds <b style={{color:'#e6eef9'}}>Skardi</b>, the self-improving context
            framework for AI agents. One governed layer between your agents and your
            company's data, where the questions that keep coming back become tools.
          </p>
        </div>
      </section>

      {/* Our story */}
      <section style={{ padding: '40px 32px 100px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ marginBottom: 40, textAlign: 'center' }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
              letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
              color: '#2ee89a', marginBottom: 16,
            }}>Story</div>
            <h2 style={{
              fontFamily: 'Inter, sans-serif', fontSize: 'clamp(32px, 4vw, 44px)', fontWeight: 700,
              letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0, color: '#e6eef9',
            }}>The gap isn't the model</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            <div style={{
              padding: 32, borderRadius: 14,
              background: '#0a1220', border: '1px solid rgba(125,211,252,0.08)',
              borderTop: '1px solid rgba(46,232,154,0.35)',
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
                color: '#2ee89a', marginBottom: 14,
              }}>The thesis</div>
              <h3 style={{
                fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 600,
                letterSpacing: '-0.015em', lineHeight: 1.25,
                margin: 0, marginBottom: 14, color: '#e6eef9',
              }}>Today's data stack was built for humans</h3>
              <p style={{
                fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.65,
                margin: 0, color: '#8ea3c0',
              }}>
                Hand an LLM a raw schema dump and it hallucinates. Hand it a bag of bespoke REST
                endpoints and it gets lost. And every tool you wrap by hand is a guess about what
                the agent will need, frozen at ship time. Skardi closes that gap.
              </p>
            </div>
            <div style={{
              padding: 32, borderRadius: 14,
              background: '#0a1220', border: '1px solid rgba(125,211,252,0.08)',
              borderTop: '1px solid rgba(46,232,154,0.35)',
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
                color: '#2ee89a', marginBottom: 14,
              }}>The approach</div>
              <h3 style={{
                fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 600,
                letterSpacing: '-0.015em', lineHeight: 1.25,
                margin: 0, marginBottom: 14, color: '#e6eef9',
              }}>The toolset should grow itself</h3>
              <p style={{
                fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.65,
                margin: 0, color: '#8ea3c0',
              }}>
                Skardi records every question an agent asks and why it asked. The questions that
                keep coming back become named tools: reviewed, audited, revertable. Each cycle
                leaves one fewer thing for your agents to figure out from scratch, inside the
                permissions each user already has.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Principles */}
      <section style={{ padding: '100px 32px', background: '#060b14', borderTop: '1px solid rgba(125,211,252,0.06)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ marginBottom: 56, textAlign: 'center' }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
              letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
              color: '#2ee89a', marginBottom: 16,
            }}>Principles</div>
            <h2 style={{
              fontFamily: 'Inter, sans-serif', fontSize: 'clamp(32px, 4vw, 44px)', fontWeight: 700,
              letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0, color: '#e6eef9',
            }}>How we build</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
            {principles.map(v => (
              <div key={v.t} style={{
                padding: '28px 30px', borderRadius: 12,
                background: '#0a1220', border: '1px solid rgba(125,211,252,0.08)',
              }}>
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 32, fontWeight: 300,
                  color: 'transparent', WebkitTextStroke: '1px rgba(46,232,154,0.35)',
                  letterSpacing: '-0.02em', marginBottom: 16, lineHeight: 1,
                }}>{v.eye}</div>
                <h3 style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 20, fontWeight: 600,
                  letterSpacing: '-0.015em', margin: 0, marginBottom: 10, color: '#e6eef9',
                }}>{v.t}</h3>
                <p style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 14.5, lineHeight: 1.6,
                  margin: 0, color: '#8ea3c0',
                }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Facts */}
      <section style={{ padding: '100px 32px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ marginBottom: 48, textAlign: 'center' }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
              letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
              color: '#2ee89a', marginBottom: 16,
            }}>Facts</div>
            <h2 style={{
              fontFamily: 'Inter, sans-serif', fontSize: 'clamp(32px, 4vw, 44px)', fontWeight: 700,
              letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0, color: '#e6eef9',
            }}>Quick facts</h2>
          </div>
          <div style={{
            border: '1px solid rgba(125,211,252,0.08)', borderRadius: 12,
            background: '#0a1220', overflow: 'hidden',
          }}>
            {[
              ['Founded',      '2025'],
              ['Headquarters', 'Remote · building in public'],
              ['License',      'Apache 2.0'],
              ['Stack',        'Rust · Apache DataFusion · Lance · SQLite · PostgreSQL'],
              ['Status',       'Beta · under active development'],
              ['Engagement',   'GitHub · Discord · open PRs'],
            ].map((row, i, arr) => (
              <div key={row[0]} style={{
                display: 'grid', gridTemplateColumns: '220px 1fr',
                padding: '18px 24px',
                borderBottom: i < arr.length - 1 ? '1px solid rgba(125,211,252,0.06)' : 'none',
                alignItems: 'center', gap: 16,
              }}>
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                  color: '#6b7e9a', fontWeight: 500,
                }}>{row[0]}</div>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 15,
                  color: '#e6eef9',
                }}>{row[1]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

window.AboutContent = AboutContent;