import Link from "next/link";
import { notFound } from "next/navigation";
import { getServiceBySlug, getAllSlugs, services } from "@/lib/servicesData";

export function generateStaticParams() {
  return getAllSlugs().map((slug) => ({ slug }));
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const service = getServiceBySlug(slug);
  if (!service) return {};
  return {
    title: `${service.title} — Paid2Marketing`,
    description: service.desc,
  };
}

export default async function ServiceDetailPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const service = getServiceBySlug(slug);
  if (!service) notFound();

  const currentIndex = services.findIndex((s) => s.slug === slug);
  const prev = services[currentIndex - 1] ?? null;
  const next = services[currentIndex + 1] ?? null;

  return (
    <>
      {/* Hero */}
      <section className="relative pt-36 pb-20 overflow-hidden" style={{ background: "var(--bg1)" }}>
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[700px] h-[400px] bg-[#28c76f]/6 blur-[120px] rounded-full pointer-events-none" />
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          {/* Breadcrumb */}
          <nav className="flex items-center gap-2 text-xs mb-8" style={{ color: "var(--fg3)" }}>
            <Link href="/" className="hover:text-[#28c76f] transition-colors">Home</Link>
            <span>/</span>
            <Link href="/services" className="hover:text-[#28c76f] transition-colors">Services</Link>
            <span>/</span>
            <span style={{ color: "var(--fg1)" }}>{service.title}</span>
          </nav>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">
                {service.emoji} {service.title}
              </span>
              <h1 className="text-5xl sm:text-6xl font-extrabold mb-4 leading-tight" style={{ color: "var(--fg1)" }}>
                <span className="gradient-text">{service.tagline}</span>
              </h1>
              <p className="text-lg leading-relaxed mb-8" style={{ color: "var(--fg2)" }}>
                {service.longDesc}
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Link
                  href="/contact"
                  className="px-7 py-3.5 rounded-xl bg-[#28c76f] hover:bg-[#22b965] text-white font-semibold text-sm transition-all duration-200 shadow-lg shadow-[#28c76f]/20 hover:-translate-y-0.5 text-center"
                >
                  Get Started Free
                </Link>
                <Link
                  href="/pricing"
                  className="px-7 py-3.5 rounded-xl font-semibold text-sm transition-all duration-200 hover:-translate-y-0.5 text-center"
                  style={{ border: "1px solid var(--border-strong)", color: "var(--fg1)" }}
                >
                  View Pricing
                </Link>
              </div>
            </div>

            {/* Feature highlight cards */}
            <div className="grid grid-cols-2 gap-3">
              {service.detailedFeatures.slice(0, 4).map((f) => (
                <div key={f.title} className="glass-card rounded-xl p-4 card-hover">
                  <div className="w-8 h-8 rounded-lg bg-[#28c76f]/10 text-[#28c76f] flex items-center justify-center mb-3">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
                    </svg>
                  </div>
                  <p className="text-sm font-semibold mb-1" style={{ color: "var(--fg1)" }}>{f.title}</p>
                  <p className="text-xs leading-relaxed" style={{ color: "var(--fg3)" }}>{f.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* All Features */}
      <section className="py-20" style={{ background: "var(--bg2)" }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-14">
            <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">
              Everything Included
            </span>
            <h2 className="text-4xl font-bold" style={{ color: "var(--fg1)" }}>
              All <span className="gradient-text">Features</span>
            </h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {service.detailedFeatures.map((f) => (
              <div key={f.title} className="glass-card rounded-2xl p-6 card-hover">
                <div className="w-10 h-10 rounded-xl bg-[#28c76f]/10 text-[#28c76f] flex items-center justify-center mb-4">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <h3 className="font-bold text-sm mb-2" style={{ color: "var(--fg1)" }}>{f.title}</h3>
                <p className="text-xs leading-relaxed" style={{ color: "var(--fg2)" }}>{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section className="py-20" style={{ background: "var(--bg1)" }}>
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-14">
            <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">
              Pricing
            </span>
            <h2 className="text-4xl font-bold mb-3" style={{ color: "var(--fg1)" }}>
              Simple, <span className="gradient-text">Transparent</span> Plans
            </h2>
            <p className="text-base" style={{ color: "var(--fg2)" }}>
              Start free, upgrade as you grow. No hidden fees, no long-term contracts.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {service.tiers.map((tier, i) => {
              const isPro = i === 1;
              return (
                <div
                  key={tier.name}
                  className={`rounded-2xl p-7 flex flex-col card-hover ${isPro ? "border-2 border-[#28c76f] shadow-xl shadow-[#28c76f]/10 md:scale-105" : "glass-card"}`}
                  style={isPro ? { background: "var(--bg3)" } : {}}
                >
                  {isPro && (
                    <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f] text-white text-xs font-semibold mb-4 self-start">
                      Most Popular
                    </span>
                  )}
                  <h3 className="text-lg font-bold mb-1" style={{ color: "var(--fg1)" }}>{tier.name}</h3>
                  <p className="text-sm mb-5" style={{ color: "var(--fg3)" }}>{tier.highlight}</p>
                  <div className="text-4xl font-extrabold mb-6" style={{ color: "var(--fg1)" }}>
                    ${tier.priceUsd}
                    <span className="text-base font-normal" style={{ color: "var(--fg3)" }}>/mo</span>
                  </div>
                  <ul className="space-y-2.5 mb-8 flex-1">
                    {tier.features.map((f) => (
                      <li key={f} className="flex items-center gap-2 text-sm" style={{ color: "var(--fg2)" }}>
                        <svg className="w-4 h-4 text-[#28c76f] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
                        </svg>
                        {f}
                      </li>
                    ))}
                  </ul>
                  <Link
                    href="/contact"
                    className={`block text-center py-3.5 rounded-xl font-semibold text-sm transition-all duration-200 ${
                      isPro
                        ? "bg-[#28c76f] hover:bg-[#22b965] text-white shadow-lg shadow-[#28c76f]/20"
                        : "hover:border-[#28c76f]/40 hover:text-[#28c76f]"
                    }`}
                    style={!isPro ? { border: "1px solid var(--border-strong)", color: "var(--fg1)" } : {}}
                  >
                    Get Started
                  </Link>
                </div>
              );
            })}
          </div>

          <p className="text-center text-sm mt-8" style={{ color: "var(--fg3)" }}>
            Need all 8 services?{" "}
            <Link href="/pricing" className="text-[#28c76f] font-semibold hover:underline">
              See our Combo packages and save 40%+
            </Link>
          </p>
        </div>
      </section>

      {/* Use Cases */}
      <section className="py-20" style={{ background: "var(--bg2)" }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
            <div>
              <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">
                Use Cases
              </span>
              <h2 className="text-4xl font-bold mb-6" style={{ color: "var(--fg1)" }}>
                Who uses <span className="gradient-text">{service.title}?</span>
              </h2>
              <p className="leading-relaxed mb-8" style={{ color: "var(--fg2)" }}>
                Businesses of all sizes use {service.title} to connect with customers, automate repetitive tasks, and drive measurable growth.
              </p>
              <ul className="space-y-3">
                {service.useCases.map((uc) => (
                  <li key={uc} className="flex items-start gap-3" style={{ color: "var(--fg2)" }}>
                    <span className="w-5 h-5 rounded-full bg-[#28c76f]/10 text-[#28c76f] flex items-center justify-center flex-shrink-0 mt-0.5 text-xs font-bold">✓</span>
                    <span className="text-sm">{uc}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* FAQ */}
            <div>
              <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">
                FAQ
              </span>
              <h2 className="text-4xl font-bold mb-8" style={{ color: "var(--fg1)" }}>
                Common <span className="gradient-text">Questions</span>
              </h2>
              <div className="space-y-4">
                {service.faqs.map((faq) => (
                  <div key={faq.q} className="glass-card rounded-xl p-5">
                    <h4 className="font-semibold text-sm mb-2" style={{ color: "var(--fg1)" }}>{faq.q}</h4>
                    <p className="text-sm leading-relaxed" style={{ color: "var(--fg2)" }}>{faq.a}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Prev / Next */}
      <section className="py-12" style={{ background: "var(--bg1)", borderTop: "1px solid var(--border)" }}>
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between gap-4">
            {prev ? (
              <Link href={`/services/${prev.slug}`} className="flex items-center gap-3 group">
                <svg className="w-5 h-5 text-[#28c76f] group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16l-4-4m0 0l4-4m-4 4h18" />
                </svg>
                <div>
                  <p className="text-xs mb-0.5" style={{ color: "var(--fg3)" }}>Previous</p>
                  <p className="text-sm font-semibold" style={{ color: "var(--fg1)" }}>{prev.emoji} {prev.title}</p>
                </div>
              </Link>
            ) : <div />}
            <Link href="/services" className="text-xs font-semibold text-[#28c76f] hover:text-[#22b965] transition-colors">
              All Services
            </Link>
            {next ? (
              <Link href={`/services/${next.slug}`} className="flex items-center gap-3 group text-right">
                <div>
                  <p className="text-xs mb-0.5" style={{ color: "var(--fg3)" }}>Next</p>
                  <p className="text-sm font-semibold" style={{ color: "var(--fg1)" }}>{next.emoji} {next.title}</p>
                </div>
                <svg className="w-5 h-5 text-[#28c76f] group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </Link>
            ) : <div />}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20" style={{ background: "var(--bg2)" }}>
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="glass-card rounded-3xl p-12 green-glow relative overflow-hidden">
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[300px] h-[150px] bg-[#28c76f]/8 blur-[60px] rounded-full pointer-events-none" />
            <h2 className="relative text-3xl font-bold mb-3" style={{ color: "var(--fg1)" }}>
              Ready to try <span className="gradient-text">{service.title}?</span>
            </h2>
            <p className="relative mb-6" style={{ color: "var(--fg2)" }}>
              Start with a free consultation. We&apos;ll help you choose the right plan for your business.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center relative">
              <Link href="/contact" className="px-8 py-4 rounded-xl bg-[#28c76f] hover:bg-[#22b965] text-white font-semibold transition-all duration-200 shadow-lg shadow-[#28c76f]/25 hover:-translate-y-0.5">
                Contact Us
              </Link>
              <Link href="/pricing" className="px-8 py-4 rounded-xl font-semibold transition-all duration-200 hover:-translate-y-0.5"
                style={{ border: "1px solid var(--border-strong)", color: "var(--fg1)" }}>
                View All Pricing
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
