import Link from "next/link";
import { Check, Cpu, Database, HardDrive, Network, Server, ShieldCheck, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Reveal } from "@/components/animations/reveal";
import { CTA, FAQ, SectionHeading } from "@/components/sections/shared";

export type ServiceConfig = { title:string; eyebrow:string; description:string; price:string; badge?:string; plans:{name:string;price:string;description:string;features:string[]}[] };
export function ServicePage({config}:{config:ServiceConfig}){const features=[[Zap,"Optimized performance","Modern software stacks, NVMe storage, and carefully tuned infrastructure."],[ShieldCheck,"Security controls","Layered protection, account isolation, SSL, monitoring, and hardened defaults."],[Database,"Automated backups","Independent recovery points designed to protect critical website and application data."],[Network,"Reliable networking","Low-latency routes, redundant connectivity, and proactive availability monitoring."],[Cpu,"Flexible compute","Choose resources that fit today and scale as traffic and workloads increase."],[Server,"Expert support","Practical help from a team that understands hosting, migration, and production systems."]];return <>
<section className="relative overflow-hidden pb-20 pt-36"><div className="absolute inset-0 bg-grid bg-[size:44px_44px] [mask-image:linear-gradient(to_bottom,black,transparent)]"/><div className="absolute left-1/4 top-20 h-96 w-96 rounded-full bg-primary/20 blur-[120px]"/><div className="section-shell relative text-center"><Reveal><span className="eyebrow">{config.eyebrow}</span><h1 className="mx-auto mt-6 max-w-5xl font-heading text-5xl font-extrabold tracking-[-.04em] sm:text-7xl">{config.title}</h1><p className="mx-auto mt-6 max-w-3xl text-lg leading-8 text-slate-300">{config.description}</p><div className="mt-8 flex justify-center gap-3"><Button size="lg" asChild><a href="#plans">View plans</a></Button><Button size="lg" variant="outline" asChild><Link href="/contact">Talk to sales</Link></Button></div></Reveal></div></section>
<section id="plans" className="py-20"><div className="section-shell"><SectionHeading eyebrow="Flexible plans" title="Transparent pricing. Serious capability." description="Choose the plan that matches your current workload, with a clear path to scale when you need more."/><div className="grid gap-5 lg:grid-cols-3">{config.plans.map((p,i)=><Reveal delay={i*.08} key={p.name}><Card className={`h-full p-7 ${i===1?"border-primary/40 shadow-glow":""}`}>{i===1&&<span className="rounded-full bg-primary/15 px-3 py-1 text-xs font-semibold text-cyan-300">Most popular</span>}<h3 className="mt-4 font-heading text-2xl font-bold">{p.name}</h3><p className="mt-2 min-h-14 text-sm leading-6 text-slate-400">{p.description}</p><div className="mt-6"><strong className="font-heading text-4xl">{p.price}</strong><span className="text-slate-500">/month</span></div><Button className="mt-6 w-full">Choose {p.name}</Button><ul className="mt-6 space-y-3">{p.features.map(f=><li className="flex gap-2 text-sm text-slate-300" key={f}><Check className="h-4 w-4 text-emerald-400"/>{f}</li>)}</ul></Card></Reveal>)}</div></div></section>
<section className="border-y border-white/[0.06] bg-white/[0.018] py-24"><div className="section-shell"><SectionHeading eyebrow="Platform capabilities" title="Everything your workload needs" description="A complete hosting foundation covering performance, security, recoverability, and operational clarity."/><div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">{features.map(([Icon,t,d],i)=><Reveal delay={i*.05} key={String(t)}><Card className="p-7"><Icon className="h-7 w-7 text-cyan-300"/><h3 className="mt-5 font-heading text-xl font-bold">{String(t)}</h3><p className="mt-3 text-sm leading-7 text-slate-400">{String(d)}</p></Card></Reveal>)}</div></div></section>
<section className="py-24"><div className="section-shell"><SectionHeading eyebrow="Compare" title="Plan comparison" description="Review the core resource and service differences before choosing your deployment."/><div className="overflow-x-auto rounded-3xl border border-white/[0.08]"><table className="w-full min-w-[760px] text-left text-sm"><thead className="bg-white/[0.05]"><tr><th className="p-5">Feature</th>{config.plans.map(p=><th className="p-5" key={p.name}>{p.name}</th>)}</tr></thead><tbody>{[["NVMe storage","Included","Included","Included"],["Free SSL","Included","Included","Included"],["Automated backups","Daily","Daily","Custom retention"],["Migration assistance","Guided","Managed","Priority managed"],["Support","Standard","Priority","Priority"]].map(r=><tr className="border-t border-white/[0.06]" key={r[0]}>{r.map((c,i)=><td className={`p-5 ${i===0?"font-semibold":"text-slate-400"}`} key={c}>{c}</td>)}</tr>)}</tbody></table></div></div></section>
<section className="border-y border-white/[0.06] bg-white/[0.018] py-24"><div className="section-shell grid gap-6 lg:grid-cols-3">{[[HardDrive,"NVMe storage","Fast I/O for databases, applications, and content-heavy websites."],[Cpu,"Modern processors","High-frequency compute designed for responsive production workloads."],[Network,"Protected network","Redundant connectivity, DDoS controls, and continuous service monitoring."]].map(([Icon,t,d])=><Card className="p-7" key={String(t)}><Icon className="h-7 w-7 text-cyan-300"/><h3 className="mt-4 font-heading text-xl font-bold">{String(t)}</h3><p className="mt-3 text-sm leading-7 text-slate-400">{String(d)}</p></Card>)}</div></section>
<FAQ/><CTA/></>}