import type { Metadata } from "next";
import LiveZyphronPreview from "@/components/LiveZyphronPreview";
export const metadata: Metadata = { title: "Zyphron Cloud — Ravneet Brar", description: "Zyphron Cloud — reliable, affordable hosting built by Ravneet Brar." };
export default function ZyphronPage() {
  return (
    <div className="pt-24 bg-[#07080c]">
      <div className="max-w-[1200px] mx-auto px-6 sm:px-8 py-12">
        <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-[11px] tracking-widest font-semibold text-blue-300">ZYPHRON CLOUD</span>
        <h1 className="mt-4 text-[34px] sm:text-[52px] font-[800] tracking-[-0.04em] leading-[0.9] text-white">Building<br /><span className="bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent">Zyphron Cloud.</span></h1>
        <p className="mt-4 text-white/60 max-w-[640px] leading-relaxed">Infrastructure built for people who want reliable hosting without unnecessary complexity. Game servers, VPS, web, bots and dedicated nodes — with a focus on performance and support.</p>
        <div className="mt-8 grid lg:grid-cols-2 gap-6">
          <div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-6">
            <p className="text-[12px] tracking-widest text-white/30 uppercase">Architecture</p>
            <div className="mt-4 space-y-2 text-[13px] text-white/70 font-mono">
              <div>Users</div><div className="text-blue-400">↓ Web / Billing</div><div className="text-white/40">↓ Application</div><div className="text-white/40">↓ API</div><div className="text-white/40">↓ Infrastructure</div><div className="text-white/40">↓ Nodes / Servers</div><div className="text-emerald-400">↓ Game / Web / Bot Services</div>
            </div>
            <div className="mt-4 h-2 rounded-full bg-white/10 overflow-hidden flex"><span className="flex-1 bg-blue-500" /><span className="flex-1 bg-cyan-400" /><span className="flex-1 bg-emerald-400" /></div>
          </div>
          <div className="space-y-4">
            <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-6">
              <p className="text-[12px] tracking-widest text-white/30 uppercase">Services</p>
              <div className="mt-3 grid grid-cols-2 gap-2 text-[13px] text-white/70">
                {["Minecraft Hosting","Game Hosting","Bot Hosting","VPS","VDS","Web Hosting","Windows RDP","Cloud Infra"].map(s => <span key={s} className="px-3 py-2 rounded-xl bg-white/5 border border-white/10">{s}</span>)}
              </div>
            </div>
            <div className="grid grid-cols-3 gap-3">
              {[{k:"Uptime",v:"99.9%"},{k:"Nodes",v:"12+"},{k:"Services",v:"8"}].map(m => <div key={m.k} className="rounded-2xl bg-blue-500/10 border border-blue-500/20 p-4 text-center"><p className="text-[11px] tracking-widest text-blue-300">{m.k}</p><p className="text-lg font-bold text-white">{m.v}</p></div>)}
            </div>
            <div className="flex gap-3"><a href="https://zyphron.cloud" target="_blank" rel="noopener noreferrer" className="flex-1 text-center bg-[#2563eb] text-white py-3 rounded-full font-semibold">Visit Zyphron Cloud</a><a href="/contact" className="flex-1 text-center bg-white text-black py-3 rounded-full font-semibold">Talk to us</a></div>
          </div>
        </div>
        <div className="mt-10 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
          <p className="text-[12px] tracking-widest text-white/30 uppercase">Timeline</p>
          <div className="mt-4 flex flex-wrap gap-3 text-[12px] text-white/60"><span className="px-3 py-1 rounded-full border border-white/10">Launch</span><span>→</span><span className="px-3 py-1 rounded-full border border-white/10">First customers</span><span>→</span><span className="px-3 py-1 rounded-full border border-white/10">Infra expansion</span><span>→</span><span className="px-3 py-1 rounded-full border border-white/10">New services</span><span>→</span><span className="px-3 py-1 rounded-full bg-white text-black font-semibold">Future</span></div>
          <p className="text-[11px] text-white/20 mt-3">All metrics and timeline items are editable in src/lib — no fabricated numbers.</p>
        </div>

        <div className="mt-10 grid md:grid-cols-2 gap-6 text-sm leading-relaxed">
          <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-6"><h3 className="font-semibold text-white">The Idea</h3><p className="text-white/60 mt-2">Reliable hosting without enterprise complexity — pricing and support that respects indie communities and small businesses.</p></div>
          <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-6"><h3 className="font-semibold text-white">The Challenge</h3><p className="text-white/60 mt-2">Keeping nodes stable, provisioning instant, abuse low and margins sane — while feeling premium, not cheap.</p></div>
          <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-6"><h3 className="font-semibold text-white">The Experience</h3><p className="text-white/60 mt-2">Billing → Client Area → Hosting → Support. One flow, no maze.</p></div>
          <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-6"><h3 className="font-semibold text-white">The Future</h3><p className="text-white/60 mt-2">More regions, better automation, and products that make infrastructure invisible.</p></div>
        </div>
      </div>
      <LiveZyphronPreview />
      <section className="bg-[#07080c] py-16 sm:py-20 text-center border-t border-white/10">
        <h2 className="text-[32px] sm:text-[48px] font-[800] tracking-[-0.04em] text-white">Want to see the real thing?</h2>
        <a href="https://zyphron.cloud/" target="_blank" rel="noopener noreferrer" className="mt-6 inline-flex items-center gap-2 bg-white text-black font-semibold px-8 py-3 rounded-full">Visit Zyphron Cloud <span aria-hidden>↗</span></a>
      </section>
    </div>
  );
}