/**
 * ThinkSchool Public Website — Pricing Component
 * Completely configuration-driven with annual/monthly billing toggle and feature matrix.
 */
function PricingSection() {
  const pricingConfig = window.PRICING_CONFIG || {};
  const [isAnnual, setIsAnnual] = React.useState(true);

  if (!pricingConfig.enabled) return null;

  const plans = pricingConfig.plans || [];
  const currency = pricingConfig.currency || "";
  const hasPublishedPricing = pricingConfig.available !== false && plans.length > 0;
  const heading = pricingConfig.heading || {};
  const unavailable = pricingConfig.unavailable || {};

  return (
    <section id="pricing" className="py-24 md:py-32 bg-black border-t border-white/10 relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow={heading.eyebrow || "Pricing"}
          title={heading.title || "Plan the right operating model for your school."}
          description={heading.description || "Talk through the workflows your school needs."}
          align="center"
          className="mb-12"
        />

        {hasPublishedPricing ? (
          <>
            {/* Billing Cycle Toggle */}
            <div className="flex items-center justify-center gap-3 mb-16">
              <span
                onClick={() => setIsAnnual(false)}
                className={`text-sm font-medium font-body cursor-pointer transition-colors ${
                  !isAnnual ? "text-white" : "text-zinc-500 hover:text-zinc-300"
                }`}
              >
                Billed Monthly
              </span>

              <button
                type="button"
                onClick={() => setIsAnnual(!isAnnual)}
                className="w-14 h-8 rounded-full bg-zinc-800 p-1 relative transition-colors focus:outline-none focus:ring-2 focus:ring-amber-400"
                aria-label="Toggle Annual / Monthly Billing"
                aria-pressed={isAnnual}
              >
                <div
                  className={`w-6 h-6 rounded-full bg-amber-500 transition-transform duration-200 ${
                    isAnnual ? "translate-x-6" : "translate-x-0"
                  }`}
                />
              </button>

              <span
                onClick={() => setIsAnnual(true)}
                className={`text-sm font-medium font-body cursor-pointer flex items-center gap-1.5 transition-colors ${
                  isAnnual ? "text-white" : "text-zinc-500 hover:text-zinc-300"
                }`}
              >
                <span>Billed Annually</span>
              </span>
            </div>

            {/* Pricing Cards Grid */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
              {plans.map((plan) => {
                const price = plan.price
                  ? plan.price.custom
                    ? plan.price.label
                    : `${currency}${isAnnual ? plan.price.annual : plan.price.monthly}`
                  : "Contact";

                return (
                  <div
                    key={plan.id}
                    className={`rounded-3xl p-8 flex flex-col justify-between transition-all duration-300 relative ${
                      plan.popular
                        ? "bg-gradient-to-b from-zinc-900 to-zinc-950 border-2 border-amber-500/50 shadow-[0_0_40px_rgba(245,158,11,0.15)] md:-translate-y-2"
                        : "bg-zinc-950/80 border border-white/10 hover:border-white/20"
                    }`}
                  >
                    {plan.popular && (
                      <div className="absolute -top-3.5 left-1/2 -translate-x-1/2">
                        <span className="px-3.5 py-1 rounded-full text-[11px] font-bold tracking-wider uppercase bg-gradient-to-r from-amber-500 to-orange-500 text-black shadow-md">
                          {plan.badge}
                        </span>
                      </div>
                    )}

                    <div>
                      <div className="flex items-center justify-between mb-4">
                        <h3 className="text-xl font-heading italic text-white">{plan.name}</h3>
                        {!plan.popular && plan.badge && (
                          <Badge variant="zinc">{plan.badge}</Badge>
                        )}
                      </div>

                      <p className="text-xs text-zinc-400 font-body leading-relaxed mb-6">
                        {plan.description}
                      </p>

                      <div className="flex items-baseline gap-1 mb-6 pb-6 border-b border-white/10">
                        <span className="text-4xl sm:text-5xl font-heading italic font-bold text-white">
                          {price}
                        </span>
                        {!plan.price.custom && (
                          <span className="text-xs text-zinc-400 font-body">
                            /{pricingConfig.billingPeriodLabel || "billing period"}
                          </span>
                        )}
                      </div>

                      <ul className="space-y-3 mb-8">
                        {plan.features.map((feature, i) => (
                          <li key={i} className="flex items-start gap-2.5 text-xs sm:text-sm text-zinc-300 font-body">
                            <Icon name="check" size={14} className="text-amber-400 mt-0.5 shrink-0" />
                            <span>{feature}</span>
                          </li>
                        ))}
                      </ul>
                    </div>

                    <div>
                      <Button
                        href={plan.cta.href}
                        variant={plan.popular ? "primary" : "secondary"}
                        size="md"
                        className="w-full"
                      >
                        {plan.cta.label}
                      </Button>
                    </div>
                  </div>
                );
              })}
            </div>
          </>
        ) : (
          <div className="max-w-2xl mx-auto p-8 sm:p-12 rounded-3xl bg-zinc-950 border border-white/10 text-center">
            <div className="w-12 h-12 mx-auto rounded-2xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center mb-5">
              <Icon name="message-circle" size={22} />
            </div>
            <h3 className="text-2xl sm:text-3xl font-heading italic text-white mb-3">
              {unavailable.title || "Request institution-specific pricing"}
            </h3>
            <p className="text-sm text-zinc-400 leading-relaxed max-w-lg mx-auto mb-7">
              {unavailable.description || "Pricing details are not published yet."}
            </p>
            {unavailable.cta && (
              <Button href={unavailable.cta.href} variant="primary" size="md">
                {unavailable.cta.label}
              </Button>
            )}
          </div>
        )}

        {pricingConfig.note && (
          <p className="text-center text-xs text-zinc-500 font-body mt-10">
            {pricingConfig.note}
          </p>
        )}
      </div>
    </section>
  );
}

window.PricingSection = PricingSection;