import React from "react";
import { Link } from "react-router-dom";

/**
 * IBrandBiz — Services Page (Pre‑Login)
 * 
 * Voice: Clear, persuasive, tied to the site slogan “Make Your First Impression Your Best!”
 * Tech: React + TailwindCSS (no external UI libs required)
 * Routes assumed:
 *  - /name-wizard
 *  - /domains
 *  - /hosting
 */

export default function ServicesPage() {
  return (
    <main className="min-h-screen bg-white text-slate-800">
      {/* Intro Banner */}
      <section className="relative isolate overflow-hidden bg-gradient-to-br from-[#d4f1f4] via-[#75e6da] to-[#5cccdc]">
        <div className="mx-auto max-w-6xl px-6 py-20 sm:py-24">
          <p className="text-sm tracking-wider uppercase text-[#03222e]/70 font-semibold mb-2">
            Our Core Services
          </p>
          <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-[#03222e] leading-tight">
            Make Your First Impression Your Best
            <span className="text-[#05445e]"> — from Name to Hosting</span>
          </h1>
          <p className="mt-5 max-w-2xl text-base sm:text-lg text-[#03222e]/80">
            From naming to domains and hosting, we give you everything you need to launch and grow your brand with confidence.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <CTA href="/name-wizard" label="Try the Name Wizard" />
            <CTA href="/domains" variant="outline" label="Search Domains" />
            <CTA href="/hosting" variant="ghost" label="Get Hosting" />
          </div>
        </div>
        {/* soft shapes */}
        <div className="pointer-events-none absolute -right-28 -top-28 h-64 w-64 rounded-full bg-white/25 blur-2xl" />
        <div className="pointer-events-none absolute -left-20 bottom-0 h-64 w-64 rounded-full bg-white/20 blur-2xl" />
      </section>

      {/* Services Grid */}
      <section className="mx-auto max-w-6xl px-6 py-16">
        <div className="grid gap-6 md:grid-cols-3">
          <ServiceCard
            eyebrow="Brand Name Wizard"
            title="Find a Name People Remember"
            description="AI-powered name ideas based on your keywords, industry, and vibe. Instantly generate unique, brandable names with matching domain suggestions."
            bullets={[
              "Smart prompts tuned for memorability",
              "Instant shortlist with save + copy",
              "Checks domain availability hints"
            ]}
            ctaLabel="Try the Wizard"
            href="/name-wizard"
            tone="teal"
          />

          <ServiceCard
            eyebrow="Domains"
            title="Secure the Perfect Domain"
            description="Search and secure your domain with our GoDaddy-powered lookup. Lock in your brand’s home online before someone else does."
            bullets={[
              "Fast search with sensible suggestions",
              "Filters for extensions (.com, .io, .co)",
              "Straightforward checkout handoff"
            ]}
            ctaLabel="Search Domains"
            href="/domains"
            tone="navy"
          />

          <ServiceCard
            eyebrow="Web Hosting"
            title="Fast, Reliable, and Ready to Scale"
            description="Secure hosting with great performance and 24/7 uptime. Pair your domain and template, then go live with confidence."
            bullets={[
              "Unlimited space options",
              "SSL + security essentials",
              "Email + backups available"
            ]}
            ctaLabel="Get Hosting"
            href="/hosting"
            tone="orange"
          />
        </div>
      </section>

      {/* Why It Matters */}
      <section className="bg-slate-50 border-y">
        <div className="mx-auto max-w-6xl px-6 py-16 grid gap-10 md:grid-cols-3">
          <WhyCard
            title="Name First, Trust Follows"
            body="Your name is your first impression. The right one is easy to say, easy to remember, and easy to recommend."
          />
          <WhyCard
            title="Domains = Findability"
            body="Your domain is where people expect to find you. Get the clean, on‑brand URL before it’s taken."
          />
          <WhyCard
            title="Hosting Makes It Real"
            body="A gorgeous brand still needs a fast, secure home. Reliable hosting turns ideas into a live business."
          />
        </div>
      </section>

      {/* Final CTA */}
      <section className="mx-auto max-w-6xl px-6 py-16 text-center">
        <h2 className="text-2xl sm:text-3xl font-bold text-[#03222e]">
          Ready to build something amazing?
        </h2>
        <p className="mt-3 text-slate-600 max-w-2xl mx-auto">
          Start with the Name Wizard, search for your perfect domain, and go live on dependable hosting — all in one flow.
        </p>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
          <CTA href="/name-wizard" label="Try the Name Wizard" />
          <CTA href="/domains" variant="outline" label="Search Domains" />
          <CTA href="/hosting" variant="ghost" label="Get Hosting" />
        </div>
      </section>
    </main>
  );
}

/* ========================= Helper Components ========================= */

type CTAProps = {
  href: string;
  label: string;
  variant?: "solid" | "outline" | "ghost";
};

function CTA({ href, label, variant = "solid" }: CTAProps) {
  const base =
    "inline-flex items-center justify-center rounded-2xl px-5 py-3 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2";
  const styles: Record<NonNullable<CTAProps["variant"]>, string> = {
    solid:
      "bg-[#189ab4] text-white shadow hover:bg-[#05445e] focus-visible:ring-[#5cccdc]",
    outline:
      "border border-slate-300 text-[#03222e] hover:bg-slate-100 focus-visible:ring-[#5cccdc]",
    ghost:
      "text-[#05445e] hover:bg-slate-100 focus-visible:ring-[#5cccdc]",
  };
  return (
    <Link to={href} className={`${base} ${styles[variant]}`}>{label}</Link>
  );
}

type ServiceCardProps = {
  eyebrow: string;
  title: string;
  description: string;
  bullets: string[];
  ctaLabel: string;
  href: string;
  tone?: "teal" | "navy" | "orange";
};

function ServiceCard({ eyebrow, title, description, bullets, ctaLabel, href, tone = "teal" }: ServiceCardProps) {
  const toneMap: Record<ServiceCardProps["tone"], string> = {
    teal: "from-[#d4f1f4] to-[#75e6da]",
    navy: "from-[#d4f1f4] to-[#5cccdc]",
    orange: "from-[#fff7ed] to-[#fde68a]",
  };

  return (
    <div className="group rounded-3xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
      <div className={`h-2 w-full bg-gradient-to-r ${toneMap[tone]}`} />
      <div className="p-6">
        <p className="text-xs uppercase tracking-wider text-slate-500 font-semibold">{eyebrow}</p>
        <h3 className="mt-2 text-xl font-bold text-[#03222e]">{title}</h3>
        <p className="mt-3 text-sm text-slate-600">{description}</p>
        <ul className="mt-4 space-y-2 text-sm text-slate-700">
          {bullets.map((b, i) => (
            <li key={i} className="flex gap-2">
              <span className="mt-1 inline-block h-2.5 w-2.5 rounded-full bg-[#189ab4] group-hover:bg-[#05445e]" />
              <span>{b}</span>
            </li>
          ))}
        </ul>
        <div className="mt-6">
          <CTA href={href} label={ctaLabel} />
        </div>
      </div>
    </div>
  );
}

type WhyCardProps = { title: string; body: string };
function WhyCard({ title, body }: WhyCardProps) {
  return (
    <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
      <h3 className="text-lg font-semibold text-[#03222e]">{title}</h3>
      <p className="mt-2 text-slate-600 text-sm">{body}</p>
    </div>
  );
}
