import Link from "next/link";
import { ArrowRight, Check, Globe2, Mail, Search, ShieldCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Reveal } from "@/components/animations/reveal";
import { CTA, SectionHeading } from "@/components/sections/shared";

export function ContentHero({eyebrow,title,description}:{eyebrow:string;title:string;description:string}){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="section-shell relative text-center"><Reveal><span className="eyebrow">{eyebrow}</span><h1 className="mx-auto mt-6 max-w-5xl font-heading text-5xl font-extrabold tracking-tight sm:text-7xl">{title}</h1><p className="mx-auto mt-6 max-w-3xl text-lg leading-8 text-slate-300">{description}</p></Reveal></div></section>}
export function ProductUtilityPage({type}:{type:"domain"|"ssl"|"email"}){const c={domain:{eyebrow:"Domain names",title:"The right domain makes your brand unforgettable.",desc:"Search, register, and manage professional domain names with straightforward pricing and expert guidance.",icon:Globe2},ssl:{eyebrow:"SSL security",title:"Turn every connection into a trusted connection.",desc:"Protect customer data, strengthen trust, and secure transactions with professionally managed SSL certificates.",icon:ShieldCheck},email:{eyebrow:"Business email",title:"Professional email built around your brand.",desc:"Give your team secure, reliable business inboxes with spam protection, mobile access, and simple administration.",icon:Mail}}[type];return <><ContentHero eyebrow={c.eyebrow} title={c.title} description={c.desc}/><section className="pb-24"><div className="section-shell"><Card className="mx-auto max-w-4xl p-7 sm:p-10">{type==="domain"?<form className="flex flex-col gap-3 sm:flex-row"><div className="relative flex-1"><Search className="absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-500"/><Input className="pl-12" placeholder="Search your perfect domain"/></div><Button>Search domain</Button></form>:<div className="grid items-center gap-8 md:grid-cols-[auto_1fr_auto]"><div className="grid h-16 w-16 place-items-center rounded-2xl bg-primary/15"><c.icon className="h-8 w-8 text-cyan-300"/></div><div><h2 className="font-heading text-2xl font-bold">Ready for business</h2><p className="mt-2 text-slate-400">Simple setup, transparent pricing, and support when you need it.</p></div><Button>Get started</Button></div>}</Card></div></section><section className="border-y border-white/[0.06] bg-white/[0.018] py-24"><div className="section-shell"><SectionHeading eyebrow="Included" title="Everything you need to operate confidently" description="Modern tools, clear management, and dependable support are included from day one."/><div className="grid gap-5 md:grid-cols-3">{["Simple management","Security-first defaults","Helpful expert support"].map(x=><Card className="p-7" key={x}><Check className="h-6 w-6 text-emerald-400"/><h3 className="mt-5 font-heading text-xl font-bold">{x}</h3><p className="mt-3 text-sm leading-7 text-slate-400">Built to reduce complexity while giving your business a professional, reliable foundation.</p></Card>)}</div></div></section><CTA/></>}
export function GenericPage({eyebrow,title,description}:{eyebrow:string;title:string;description:string}){return <><ContentHero eyebrow={eyebrow} title={title} description={description}/><section className="pb-24"><div className="section-shell grid gap-5 md:grid-cols-3">{["Built around customers","Transparent by default","Ready for long-term growth"].map((x,i)=><Reveal delay={i*.08} key={x}><Card className="p-7"><h2 className="font-heading text-xl font-bold">{x}</h2><p className="mt-3 text-sm leading-7 text-slate-400">We combine practical infrastructure, thoughtful service design, and clear communication to create better hosting outcomes.</p><Link href="/contact" className="mt-6 flex items-center gap-2 text-sm font-semibold text-cyan-300">Learn more <ArrowRight className="h-4 w-4"/></Link></Card></Reveal>)}</div></section><CTA/></>}
export function LegalPage({title,intro}:{title:string;intro:string}){return <><ContentHero eyebrow="Legal" title={title} description={intro}/><article className="section-shell max-w-4xl pb-24"><Card className="p-7 sm:p-10"><p className="text-sm text-slate-500">Last updated: July 30, 2026</p>{["Scope and acceptance","Services and responsibilities","Billing and account status","Security and acceptable use","Availability and limitations","Changes and contact"].map((h,i)=><section className="mt-9" key={h}><h2 className="font-heading text-xl font-bold">{i+1}. {h}</h2><p className="mt-3 leading-8 text-slate-400">This section explains the applicable terms in clear language. Production deployment should include a final legal review and company-specific operational, jurisdictional, billing, and data handling details.</p></section>)}</Card></article></>}