export default function LambdAILanding() {
  return (
    <div className="min-h-screen bg-black text-white font-sans">
      {/* Hero */}
      <section className="relative overflow-hidden border-b border-zinc-800">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(118,255,3,0.15),_transparent_35%)]" />
        <div className="max-w-7xl mx-auto px-6 py-24 relative z-10">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-lime-500/30 bg-lime-500/10 text-lime-400 text-sm mb-6">
                Enterprise AI Infrastructure
              </div>

              <h1 className="text-6xl lg:text-7xl font-black tracking-tight leading-none mb-6">
                LAMBD<span className="text-lime-400">AI</span>
              </h1>

              <p className="text-xl text-zinc-300 leading-relaxed mb-8 max-w-2xl">
                Private AI infrastructure, GPU cloud and enterprise inference platforms designed for organizations that require performance, security and sovereignty.
              </p>

              <div className="flex flex-wrap gap-4">
                <button className="px-8 py-4 rounded-2xl bg-lime-500 text-black font-bold hover:bg-lime-400 transition-all">
                  Request Demo
                </button>
                <button className="px-8 py-4 rounded-2xl border border-zinc-700 hover:border-lime-500 text-white transition-all">
                  View Infrastructure
                </button>
              </div>
            </div>

            <div>
              <div className="bg-zinc-950 border border-zinc-800 rounded-3xl p-8 shadow-2xl shadow-lime-500/10">
                <div className="grid grid-cols-2 gap-4 mb-6">
                  <div className="bg-zinc-900 rounded-2xl p-5 border border-zinc-800">
                    <div className="text-zinc-400 text-sm mb-2">GPU Nodes</div>
                    <div className="text-3xl font-black">H100</div>
                  </div>
                  <div className="bg-zinc-900 rounded-2xl p-5 border border-zinc-800">
                    <div className="text-zinc-400 text-sm mb-2">Deployment</div>
                    <div className="text-3xl font-black">1 Hour</div>
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="flex justify-between items-center bg-zinc-900 rounded-2xl p-5 border border-zinc-800">
                    <div>
                      <div className="font-bold">AI Compute Node S</div>
                      <div className="text-zinc-400 text-sm">1x NVIDIA H100</div>
                    </div>
                    <div className="text-lime-400 font-bold">From $2,999/mo</div>
                  </div>

                  <div className="flex justify-between items-center bg-zinc-900 rounded-2xl p-5 border border-zinc-800">
                    <div>
                      <div className="font-bold">Enterprise Cluster M</div>
                      <div className="text-zinc-400 text-sm">3x NVIDIA H100</div>
                    </div>
                    <div className="text-lime-400 font-bold">From $5,900/mo</div>
                  </div>

                  <div className="flex justify-between items-center bg-zinc-900 rounded-2xl p-5 border border-zinc-800">
                    <div>
                      <div className="font-bold">Private AI Cloud X</div>
                      <div className="text-zinc-400 text-sm">4x NVIDIA H100</div>
                    </div>
                    <div className="text-lime-400 font-bold">Custom</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section className="max-w-7xl mx-auto px-6 py-24">
        <div className="mb-16">
          <h2 className="text-5xl font-black mb-4">AI Infrastructure Services</h2>
          <p className="text-zinc-400 text-lg max-w-3xl">
            Enterprise-grade infrastructure designed for inference, fine-tuning, sovereign AI deployments and secure large language model operations.
          </p>
        </div>

        <div className="grid md:grid-cols-2 xl:grid-cols-4 gap-6">
          {[
            {
              title: 'GPU Cloud',
              text: 'Dedicated and shared NVIDIA H100 compute infrastructure optimized for AI workloads.'
            },
            {
              title: 'Private LLM Hosting',
              text: 'Deploy secure and isolated large language models for enterprise environments.'
            },
            {
              title: 'Inference APIs',
              text: 'High-performance AI APIs with scalable runtime orchestration.'
            },
            {
              title: 'Sovereign AI',
              text: 'Private infrastructure for regulated industries requiring data sovereignty.'
            }
          ].map((item) => (
            <div key={item.title} className="bg-zinc-950 border border-zinc-800 rounded-3xl p-8 hover:border-lime-500/40 transition-all">
              <div className="w-14 h-14 rounded-2xl bg-lime-500/10 border border-lime-500/20 mb-6" />
              <h3 className="text-2xl font-bold mb-4">{item.title}</h3>
              <p className="text-zinc-400 leading-relaxed">{item.text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Infrastructure */}
      <section className="border-y border-zinc-800 bg-zinc-950/50">
        <div className="max-w-7xl mx-auto px-6 py-24">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <h2 className="text-5xl font-black mb-6">Enterprise GPU Infrastructure</h2>
              <p className="text-zinc-400 text-lg leading-relaxed mb-8">
                High-density GPU infrastructure powered by NVIDIA H100 accelerators, dual AMD EPYC platforms and enterprise NVMe storage.
              </p>

              <div className="grid grid-cols-2 gap-4">
                <div className="bg-black border border-zinc-800 rounded-2xl p-6">
                  <div className="text-4xl font-black text-lime-400 mb-2">30TB</div>
                  <div className="text-zinc-400">Traffic Included</div>
                </div>

                <div className="bg-black border border-zinc-800 rounded-2xl p-6">
                  <div className="text-4xl font-black text-lime-400 mb-2">EPYC</div>
                  <div className="text-zinc-400">Dual CPU Architecture</div>
                </div>
              </div>
            </div>

            <div className="bg-black border border-zinc-800 rounded-3xl p-8">
              <div className="text-zinc-400 text-sm mb-4">Available Regions</div>
              <div className="space-y-4">
                {['Montreal, Canada', 'Frankfurt, Germany', 'London, UK', 'Singapore'].map((region) => (
                  <div key={region} className="flex justify-between items-center bg-zinc-900 rounded-2xl p-5 border border-zinc-800">
                    <div className="font-semibold">{region}</div>
                    <div className="text-lime-400">Online</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="max-w-7xl mx-auto px-6 py-24 text-center">
        <div className="bg-gradient-to-r from-lime-500/10 to-zinc-900 border border-lime-500/20 rounded-[40px] p-16">
          <h2 className="text-5xl font-black mb-6">
            Build Your Private AI Cloud
          </h2>
          <p className="text-zinc-300 text-xl max-w-3xl mx-auto mb-10">
            Deploy enterprise-grade AI infrastructure with dedicated H100 clusters, secure inference platforms and sovereign AI architecture.
          </p>

          <div className="flex justify-center gap-4 flex-wrap">
            <button className="px-8 py-4 rounded-2xl bg-lime-500 text-black font-bold hover:bg-lime-400 transition-all">
              Contact Sales
            </button>
            <button className="px-8 py-4 rounded-2xl border border-zinc-700 hover:border-lime-500 transition-all">
              Infrastructure Catalog
            </button>
          </div>
        </div>
      </section>
    </div>
  )
}