import { Container } from '../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../components/Texts'

const codeSamples = [
  {
    title: 'Simple Deployment',
    description:
      'Define deterministic workloads with familiar manifests that execute exactly as declared anywhere on the fabric.',
    language: 'yaml',
    code: `# Basic compute workload
apiVersion: v1
kind: Deployment
metadata:
  name: deterministic-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: deterministic-app
  template:
    metadata:
      labels:
        app: deterministic-app
    spec:
      containers:
      - name: app
        image: ubuntu:latest
        command: ["echo", "Deterministic deployment"]`,
  },
  {
    title: 'Zero-Image Deployment',
    description:
      'Use metadata-only images to launch workloads instantly with zero heavy artifacts to distribute.',
    language: 'yaml',
    code: `# Using zero-image technology
apiVersion: v1
kind: Pod
metadata:
  name: zero-image-pod
spec:
  containers:
  - name: app
    image: "zero-image://ubuntu-latest"  # Metadata-only image
    command: ["echo", "Running on zero-image"]`,
  },
  {
    title: 'Smart Contract Orchestration',
    description:
      'Automate workload lifecycles through cryptographically signed contracts that govern execution.',
    language: 'yaml',
    code: `# Smart contract orchestrated deployment
apiVersion: v1
kind: ConfigMap
metadata:
  name: deployment-contract
data:
  contract: |
    smart_contract:
      signature: "cryptographically_signed_deployment"
      workload_spec:
        image: "ubuntu-latest"
        replicas: 3
        verification_hash: "sha256_hash_of_workload"`,
  },
]

export function ComputeDeveloperExperience() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
            Developer Experience
          </Eyebrow>
          <SectionHeader as="h2" className="mt-6 text-gray-900">
            Declarative workflows, deterministic results.
          </SectionHeader>
          <P className="mt-6 text-gray-600">
            Ship workloads using the same declarative patterns you already
            trust. Mycelium Compute verifies and enforces every detail, from
            classic deployments to zero-image launches and smart contract
            upgrades.
          </P>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-3">
          {codeSamples.map((sample) => (
            <div
              key={sample.title}
              className="flex h-full flex-col overflow-hidden rounded-3xl border border-slate-200 bg-slate-50"
            >
              <div className="p-8">
                <p className="text-sm font-semibold uppercase tracking-[0.24em] text-cyan-500">
                  {sample.language}
                </p>
                <h3 className="mt-4 text-xl font-semibold text-gray-900">
                  {sample.title}
                </h3>
                <p className="mt-3 text-sm leading-relaxed text-gray-600">
                  {sample.description}
                </p>
              </div>
              <div className="mt-auto bg-gray-900 p-6">
                <pre className="overflow-auto text-left text-xs leading-relaxed text-cyan-100">
                  <code>{sample.code}</code>
                </pre>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
}