function FeatureGlyph({ kind }) {
  const stroke = "currentColor";
  if (kind === 'proprietary') {
    return (
      <svg width="60" height="60" viewBox="0 0 60 60" fill="none" stroke={stroke} strokeWidth="1">
        <rect x="8" y="8" width="44" height="44" rx="2" />
        <rect x="16" y="16" width="28" height="28" rx="1" />
        <rect x="24" y="24" width="12" height="12" />
        <line x1="30" y1="0" x2="30" y2="8" />
        <line x1="30" y1="52" x2="30" y2="60" />
        <line x1="0" y1="30" x2="8" y2="30" />
        <line x1="52" y1="30" x2="60" y2="30" />
      </svg>
    );
  }
  if (kind === 'gpu') {
    return (
      <svg width="60" height="60" viewBox="0 0 60 60" fill="none" stroke={stroke} strokeWidth="1">
        {[0,1,2].map(r => [0,1,2].map(c => (
          <rect key={`${r}-${c}`} x={4+c*18} y={4+r*18} width="14" height="14" />
        )))}
      </svg>
    );
  }
  if (kind === 'privacy') {
    return (
      <svg width="60" height="60" viewBox="0 0 60 60" fill="none" stroke={stroke} strokeWidth="1">
        <path d="M30 4 L52 14 L52 30 Q52 48 30 56 Q8 48 8 30 L8 14 Z" />
        <circle cx="30" cy="28" r="6" />
        <path d="M27 28 L27 36 L33 36 L33 28" />
      </svg>
    );
  }
  if (kind === 'wearable') {
    return (
      <svg width="60" height="60" viewBox="0 0 60 60" fill="none" stroke={stroke} strokeWidth="1">
        <rect x="18" y="18" width="24" height="24" rx="6" />
        <path d="M22 18 L22 10 L38 10 L38 18" />
        <path d="M22 42 L22 50 L38 50 L38 42" />
        <circle cx="30" cy="30" r="4" />
      </svg>
    );
  }
  if (kind === 'ambient') {
    return (
      <svg width="60" height="60" viewBox="0 0 60 60" fill="none" stroke={stroke} strokeWidth="1">
        <circle cx="30" cy="30" r="4" />
        <circle cx="30" cy="30" r="12" />
        <circle cx="30" cy="30" r="20" />
        <circle cx="30" cy="30" r="28" />
      </svg>
    );
  }
  if (kind === 'builder') {
    return (
      <svg width="60" height="60" viewBox="0 0 60 60" fill="none" stroke={stroke} strokeWidth="1">
        <path d="M8 30 L30 8 L52 30 L30 52 Z" />
        <path d="M20 30 L30 20 L40 30 L30 40 Z" />
      </svg>
    );
  }
  return null;
}

function Features() {
  const feats = [
    { i: 'F.01', k: 'proprietary', title: 'Fully Proprietary Model', body: 'Veiron Cortex is trained, tuned, and served by Veiron. No third-party dependencies, no leaked context.' },
    { i: 'F.02', k: 'gpu', title: 'Runs on Our Own Grid', body: '100% of inference happens on the Veiron Grid — a sovereign compute layer sized for scale.' },
    { i: 'F.03', k: 'privacy', title: 'Privacy by Architecture', body: 'Signals stay on-device until encrypted. Your biometrics never leave your keys.' },
    { i: 'F.04', k: 'wearable', title: 'Continuous Biosignal In', body: 'Heart variability, sleep stages, breath, and motion — streamed from Veiron wearables 24/7.' },
    { i: 'F.05', k: 'ambient', title: 'Ambient Presence', body: 'Context first, not chat first. LifeCoPilot intervenes only when it helps, not when it can.' },
    { i: 'F.06', k: 'builder', title: 'Buildable From Day One', body: 'Forge exposes the same Cortex model via tools, agents, and a structured pipeline for creators.' },
  ];
  return (
    <section id="features">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">02 / Platform</div>
          <div>
            <h2 className="section-title">Engineered for<br/>the <em>long</em> now.</h2>
          </div>
        </div>
      </div>
      <div className="features reveal">
        {feats.map((f) => (
          <div key={f.i} className="feature">
            <div className="feature-idx">{f.i}</div>
            <div className="feature-title">{f.title}</div>
            <div className="feature-body">{f.body}</div>
            <div className="feature-glyph" style={{color:'var(--fg-dim)'}}>
              <FeatureGlyph kind={f.k} />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.Features = Features;