import Link from "next/link";

export default function Hero() {
  return (
    <section className="container py-14 sm:py-20">
      <div className="grid items-center gap-8 sm:grid-cols-2">
        <div>
          <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
            Fixes in days. <span className="text-primary">Uptime</span> for months.
          </h1>
          <p className="mt-4 text-lg text-muted-foreground">
            Productized IT for small businesses: inbox-ready email, secure Cloudflare/DNS,
            and website care—clear scope and flat pricing.
          </p>
          <div className="mt-6 flex gap-3">
            <Link href="/contact" className="btn-primary no-underline">Start now</Link>
            <Link href="/services" className="no-underline rounded-xl border px-5 py-3">See services</Link>
          </div>
        </div>
        <div className="card">
          <ul className="space-y-3 text-sm">
            <li>✅ DMARC aligned, spoofing blocked</li>
            <li>✅ Cloudflare WAF & HTTP/3, faster TTFB</li>
            <li>✅ Daily backups with restore tests</li>
            <li>✅ Uptime watch + incident notes</li>
          </ul>
          <div className="mt-5 rounded-xl bg-muted p-4 text-sm text-muted-foreground">
            We agree scope up front and show proof: before/after reports and restore tests.
          </div>
        </div>
      </div>
    </section>
  );
}