const CARDS = [
  {
    title: 'Clean REST APIs',
    detail: 'Spring Boot, OpenAPI, tested endpoints',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
        <path d="M8 9l3 3-3 3M13 15h3" stroke="#22d3ee" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        <rect x="3" y="3" width="18" height="18" rx="3" stroke="#22d3ee" strokeWidth="2"/>
      </svg>
    ),
  },
  {
    title: 'Docker-Ready Deployments',
    detail: 'Containerized services, Docker Compose',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
        <rect x="3" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
        <rect x="6.5" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
        <rect x="10" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
        <rect x="10" y="6" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
        <rect x="13.5" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
        <rect x="6.5" y="6" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
        <path d="M21 11c-.5-1-2-1.25-2.75-1.25-.15-1.25-1-2.25-2-2.25h-.5c.25.5.25 1 .25 1.5H16V11h-3V9.5h-.5V8H9v1H8.5V7H6v2h-.5C4.5 9 4 9.5 4 10.5c0 2.5 1.75 4.5 4.25 4.5h9c2 0 3.75-1.25 4.25-3 .75 0 1.25 0 1.5-1z" fill="#22d3ee"/>
      </svg>
    ),
  },
  {
    title: 'CI/CD From Day One',
    detail: 'GitLab pipelines, automated builds and deploys',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
        <circle cx="12" cy="12" r="2" fill="#22d3ee"/>
        <circle cx="5" cy="7" r="2" fill="#22d3ee"/>
        <circle cx="19" cy="7" r="2" fill="#22d3ee"/>
        <circle cx="5" cy="17" r="2" fill="#22d3ee"/>
        <circle cx="19" cy="17" r="2" fill="#22d3ee"/>
        <path d="M7 7h10M7 17h10M12 10v4" stroke="#22d3ee" strokeWidth="1.5" strokeLinecap="round"/>
        <path d="M12 10L5 7M12 10L19 7M12 14L5 17M12 14L19 17" stroke="#22d3ee" strokeWidth="1.5" strokeLinecap="round"/>
      </svg>
    ),
  },
  {
    title: 'Production Infrastructure',
    detail: 'VPS, Nginx, SSL, monitoring',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
        <rect x="3" y="4" width="18" height="5" rx="1.5" stroke="#22d3ee" strokeWidth="2"/>
        <rect x="3" y="11" width="18" height="5" rx="1.5" stroke="#22d3ee" strokeWidth="2"/>
        <circle cx="7" cy="6.5" r="1" fill="#22d3ee"/>
        <circle cx="7" cy="13.5" r="1" fill="#22d3ee"/>
        <path d="M9 19c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="#22d3ee" strokeWidth="2" strokeLinecap="round"/>
        <circle cx="12" cy="21" r="1" fill="#22d3ee"/>
      </svg>
    ),
  },
]

export function DeliverSection() {
  return (
    <section id="deliver" className="py-24 px-6">
      <div className="max-w-6xl mx-auto">
        <div className="mb-14">
          <p className="font-mono text-xs text-accent tracking-widest mb-3 uppercase">
            Deliverables
          </p>
          <h2 className="font-heading font-bold text-4xl md:text-5xl text-white tracking-tight">
            What I Deliver
          </h2>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {CARDS.map(({ title, detail, icon }) => (
            <div
              key={title}
              className="flex flex-col gap-4 p-6 bg-zinc-900 border border-zinc-800 rounded-lg hover:border-zinc-600 hover:bg-zinc-800/70 transition-all duration-200 group"
            >
              <div className="w-10 h-10 flex items-center justify-center rounded-md bg-zinc-800 group-hover:bg-zinc-700 transition-colors duration-200">
                {icon}
              </div>
              <div className="flex flex-col gap-1.5">
                <span className="font-heading font-semibold text-white text-sm leading-snug">
                  {title}
                </span>
                <span className="font-mono text-xs text-zinc-500 leading-relaxed">
                  {detail}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}