/**
 * HostingPlanDetail.tsx
 *
 * A reusable, config-driven landing page for a single shared-hosting
 * control panel (cPanel, Plesk, aaPanel, Windows, WordPress).
 *
 * Each concrete page under `/shared-hosting/:slug` passes a `HostingPlanDetailConfig`
 * describing its brand colors, features, pricing tiers, FAQs, and the
 * upstream doiteasy.net URL (kept as a secondary reference link).
 *
 * Design:
 *   - Dark-green hero with gradient & subtle dot pattern (matches the rest
 *     of the DoItEasy site).
 *   - Pricing tier cards, feature grid, FAQ accordion, and dual CTA block.
 *   - "glass-soft" card style defined globally in index.css.
 */
import { ReactNode, useState } from "react";
import { Link } from "react-router-dom";
import SiteLayout from "@/components/SiteLayout";
import AnimateIn from "@/components/AnimateIn";
import SectionDivider from "@/components/SectionDivider";
import {
  Check,
  ArrowUpRight,
  Sparkles,
  ChevronDown,
} from "lucide-react";

export interface HostingPlanTier {
  name: string;
  price: string;     // e.g. "$3.99"
  cadence: string;   // e.g. "/mo"
  highlight?: boolean;
  features: string[];
  ctaLabel?: string;
}

export interface HostingPlanFeature {
  icon: ReactNode;
  title: string;
  desc: string;
}

export interface HostingPlanFAQ {
  q: string;
  a: string;
}

export interface HostingPlanDetailConfig {
  name: string;                 // e.g. "cPanel Hosting"
  tagline: string;              // short eyebrow tagline
  heroTitle: string;            // large hero headline
  heroDescription: string;      // hero body paragraph
  accentColor: string;          // brand hex, e.g. "#f97316"
  accentColorSoft: string;      // light tint for background, e.g. "#fff7ed"
  heroIcon: ReactNode;          // chip icon for hero
  externalUrl: string;          // canonical doiteasy.net URL
  tiers: HostingPlanTier[];
  features: HostingPlanFeature[];
  faqs: HostingPlanFAQ[];
  /** Optional pre-defined gradient for the hero background. Defaults to dark-green. */
  heroGradient?: string;
}

/**
 * Simple controlled accordion item used inside the FAQ block.
 * Kept local to this file since the FAQ UX here differs slightly from
 * the global FAQ page (inline, no search, no highlighting).
 */
function FAQItem({
  q,
  a,
  open,
  onToggle,
}: {
  q: string;
  a: string;
  open: boolean;
  onToggle: () => void;
}) {
  return (
    <div className="glass-soft rounded-xl overflow-hidden">
      <button
        type="button"
        onClick={onToggle}
        className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left"
      >
        <span className="font-semibold text-slate-900">{q}</span>
        <ChevronDown
          className={`w-5 h-5 text-[#0b6e3e] shrink-0 transition-transform ${
            open ? "rotate-180" : ""
          }`}
        />
      </button>
      <div
        className={`grid transition-all duration-300 ease-out ${
          open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
        }`}
      >
        <div className="overflow-hidden">
          <p className="px-5 pb-5 text-slate-600 leading-relaxed">{a}</p>
        </div>
      </div>
    </div>
  );
}

export default function HostingPlanDetail({
  config,
}: {
  config: HostingPlanDetailConfig;
}) {
  const [openFaq, setOpenFaq] = useState<number | null>(0);

  const heroBg =
    config.heroGradient ??
    "linear-gradient(135deg, #03120a 0%, #063019 45%, #0b6e3e 100%)";

  return (
    <SiteLayout>
      {/* ============================ BREADCRUMB =========================== */}
      <div className="bg-slate-50 border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 text-sm">
          <nav className="flex items-center gap-2 text-slate-500">
            <Link to="/" className="hover:text-[#0b6e3e]">
              Home
            </Link>
            <span>/</span>
            <Link to="/shared-hosting" className="hover:text-[#0b6e3e]">
              Shared Hosting
            </Link>
            <span>/</span>
            <span className="text-slate-900 font-medium">{config.name}</span>
          </nav>
        </div>
      </div>

      {/* =============================== HERO =============================== */}
      <section
        className="relative overflow-hidden pt-20 pb-24 text-white"
        style={{ background: heroBg }}
      >
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 opacity-20"
          style={{
            backgroundImage:
              "radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px)",
            backgroundSize: "24px 24px",
          }}
        />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-10 items-center">
            <AnimateIn>
              <span
                className="inline-flex items-center gap-2 px-4 py-1.5 text-xs font-bold uppercase tracking-wider rounded-full shadow"
                style={{
                  backgroundColor: config.accentColor,
                  color: "#fff",
                }}
              >
                <Sparkles className="w-3.5 h-3.5" />
                {config.tagline}
              </span>
              <h1 className="mt-5 text-4xl md:text-5xl xl:text-6xl font-extrabold leading-tight">
                {config.heroTitle}
              </h1>
              <p className="mt-5 max-w-xl text-lg text-white/90 leading-relaxed">
                {config.heroDescription}
              </p>
              <div className="mt-8 flex flex-wrap items-center gap-3">
                <a
                  href="#plans"
                  className="inline-flex items-center gap-2 bg-[#f5c400] hover:bg-yellow-400 text-slate-900 font-bold px-6 py-3 rounded-md shadow-md transition"
                >
                  View Plans
                </a>
                <Link
                  to="/contact"
                  className="inline-flex items-center gap-2 !bg-transparent border-2 border-white/70 hover:!bg-white hover:!text-[#0b6e3e] text-white font-bold px-6 py-3 rounded-md transition"
                >
                  Talk to Sales
                </Link>
              </div>
            </AnimateIn>

            <AnimateIn delay={150}>
              <div className="relative mx-auto max-w-md">
                <div
                  className="absolute inset-0 rounded-3xl blur-2xl opacity-50"
                  style={{ backgroundColor: config.accentColor }}
                  aria-hidden="true"
                />
                <div className="relative glass-soft rounded-3xl p-8 text-slate-800">
                  <div
                    className="w-16 h-16 rounded-2xl flex items-center justify-center text-white shadow-lg"
                    style={{ backgroundColor: config.accentColor }}
                  >
                    {config.heroIcon}
                  </div>
                  <h3 className="mt-5 text-xl font-bold">{config.name}</h3>
                  <p className="mt-2 text-sm text-slate-600 leading-relaxed">
                    Starting from{" "}
                    <span
                      className="font-bold"
                      style={{ color: config.accentColor }}
                    >
                      {config.tiers[0]?.price ?? "$2.99"}
                      <span className="text-slate-500 font-normal">
                        {config.tiers[0]?.cadence ?? "/mo"}
                      </span>
                    </span>
                  </p>
                  <ul className="mt-4 space-y-2">
                    {config.tiers[0]?.features.slice(0, 4).map((f) => (
                      <li
                        key={f}
                        className="flex items-start gap-2 text-sm text-slate-700"
                      >
                        <Check className="w-4 h-4 text-[#0b6e3e] shrink-0 mt-0.5" />
                        <span>{f}</span>
                      </li>
                    ))}
                  </ul>
                  <a
                    href={config.externalUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="mt-5 inline-flex items-center gap-1 text-sm font-bold"
                    style={{ color: config.accentColor }}
                  >
                    View on doiteasy.net
                    <ArrowUpRight className="w-4 h-4" />
                  </a>
                </div>
              </div>
            </AnimateIn>
          </div>
        </div>
      </section>

      {/* ============================== FEATURES ============================== */}
      <section className="relative py-20 bg-white">
        <SectionDivider from="#0b6e3e" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-12">
            <span
              className="font-bold uppercase tracking-widest text-sm"
              style={{ color: config.accentColor }}
            >
              Why choose it
            </span>
            <h2 className="mt-2 text-3xl md:text-4xl font-bold text-slate-900">
              Built for speed, stability & control
            </h2>
          </AnimateIn>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
            {config.features.map((f, idx) => (
              <AnimateIn key={f.title} delay={idx * 70}>
                <div className="glass-soft rounded-2xl p-6 h-full">
                  <div
                    className="w-12 h-12 rounded-xl text-white flex items-center justify-center shadow-md"
                    style={{ backgroundColor: config.accentColor }}
                  >
                    {f.icon}
                  </div>
                  <h3 className="mt-4 font-bold text-slate-900">{f.title}</h3>
                  <p className="mt-2 text-sm text-slate-600 leading-relaxed">
                    {f.desc}
                  </p>
                </div>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* =============================== PLANS =============================== */}
      <section id="plans" className="relative py-20 bg-slate-50">
        <SectionDivider from="#ffffff" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-12">
            <span
              className="font-bold uppercase tracking-widest text-sm"
              style={{ color: config.accentColor }}
            >
              Pricing
            </span>
            <h2 className="mt-2 text-3xl md:text-4xl font-bold text-slate-900">
              Choose a plan that fits your stack
            </h2>
            <p className="mt-4 text-slate-600 max-w-2xl mx-auto">
              All plans include free SSL, daily backups, a 30-day money-back
              guarantee, and free migration from your current host.
            </p>
          </AnimateIn>

          <div className="grid md:grid-cols-3 gap-6">
            {config.tiers.map((tier, idx) => (
              <AnimateIn key={tier.name} delay={idx * 100}>
                <div
                  className={`relative glass-soft rounded-3xl p-7 flex flex-col h-full border-2 transition ${
                    tier.highlight
                      ? "shadow-xl"
                      : "border-transparent hover:border-slate-200"
                  }`}
                  style={
                    tier.highlight
                      ? { borderColor: config.accentColor }
                      : undefined
                  }
                >
                  {tier.highlight && (
                    <span
                      className="absolute -top-3 left-1/2 -translate-x-1/2 text-white text-[11px] font-bold uppercase tracking-wider px-3 py-1 rounded-full shadow"
                      style={{ backgroundColor: config.accentColor }}
                    >
                      Most Popular
                    </span>
                  )}
                  <h3 className="text-lg font-bold text-slate-900">
                    {tier.name}
                  </h3>
                  <div className="mt-3 flex items-baseline gap-1">
                    <span
                      className="text-4xl font-extrabold"
                      style={{ color: config.accentColor }}
                    >
                      {tier.price}
                    </span>
                    <span className="text-sm text-slate-500">
                      {tier.cadence}
                    </span>
                  </div>
                  <ul className="mt-5 space-y-2 flex-1">
                    {tier.features.map((f) => (
                      <li
                        key={f}
                        className="flex items-start gap-2 text-sm text-slate-700"
                      >
                        <Check className="w-4 h-4 text-[#0b6e3e] shrink-0 mt-0.5" />
                        <span>{f}</span>
                      </li>
                    ))}
                  </ul>
                  <a
                    href={config.externalUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={`mt-6 inline-flex items-center justify-center gap-1.5 text-sm font-bold px-4 py-2.5 rounded-md transition ${
                      tier.highlight
                        ? "text-white shadow"
                        : "border-2 bg-transparent"
                    }`}
                    style={
                      tier.highlight
                        ? { backgroundColor: config.accentColor }
                        : {
                            borderColor: config.accentColor,
                            color: config.accentColor,
                          }
                    }
                  >
                    {tier.ctaLabel ?? "Get Started"}
                    <ArrowUpRight className="w-4 h-4" />
                  </a>
                </div>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ================================ FAQ ================================ */}
      <section className="relative py-20 bg-white">
        <SectionDivider from="#f8fafc" />
        <div className="relative max-w-3xl mx-auto px-4">
          <AnimateIn className="text-center mb-10">
            <span
              className="font-bold uppercase tracking-widest text-sm"
              style={{ color: config.accentColor }}
            >
              FAQ
            </span>
            <h2 className="mt-2 text-3xl md:text-4xl font-bold text-slate-900">
              Common questions
            </h2>
          </AnimateIn>

          <div className="space-y-3">
            {config.faqs.map((f, idx) => (
              <FAQItem
                key={f.q}
                q={f.q}
                a={f.a}
                open={openFaq === idx}
                onToggle={() => setOpenFaq(openFaq === idx ? null : idx)}
              />
            ))}
          </div>
        </div>
      </section>

      {/* ================================ CTA ================================ */}
      <section
        className="relative py-16 text-white"
        style={{
          background:
            "linear-gradient(135deg, #03120a 0%, #063019 45%, #0b6e3e 100%)",
        }}
      >
        <div className="relative max-w-4xl mx-auto px-4 text-center">
          <AnimateIn>
            <h2 className="text-3xl md:text-4xl font-bold">
              Ready to host your next project on {config.name}?
            </h2>
            <p className="mt-4 text-white/80 leading-relaxed">
              Free migration, free SSL, and 24/7 local support — all included.
            </p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
              <a
                href={config.externalUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 bg-[#f5c400] hover:bg-yellow-400 text-slate-900 font-bold px-7 py-3 rounded-md shadow-md transition"
              >
                Order Now
                <ArrowUpRight className="w-4 h-4" />
              </a>
              <Link
                to="/contact"
                className="inline-flex items-center gap-2 !bg-transparent border-2 border-white/70 hover:!bg-white hover:!text-[#0b6e3e] text-white font-bold px-7 py-3 rounded-md transition"
              >
                Contact Sales
              </Link>
            </div>
          </AnimateIn>
        </div>
      </section>
    </SiteLayout>
  );
}