// PLANS catalog (replaces simple Pricing) — links each plan to plan.html

const PlanCard = ({ plan, idx }) => {
  return (
    <a
      href={`plan.html?id=${plan.id}`}
      className="group relative rounded-[20px] border border-white/10 bg-white/[0.02] p-6 lg:p-7 card-hov reveal flex flex-col"
      style={{ transitionDelay: `${idx*0.04}s` }}
    >
      <div className="flex items-start justify-between">
        <div className="h-11 w-11 rounded-xl border border-white/12 bg-white/[0.03] flex items-center justify-center text-white/85">
          <Icon name={plan.icon} size={20} strokeWidth={1.5} />
        </div>
        {plan.badge && (
          <span className="font-mono text-[10px] tracking-[0.16em] uppercase bg-accent text-black px-2.5 py-1 rounded-full">{plan.badge}</span>
        )}
      </div>
      <h3 className="mt-6 display text-[24px] tracking-[-0.035em]">{plan.name}</h3>
      <div className="mt-2 font-mono text-[11px] text-white/45">From <span className="text-accent">${plan.price}</span></div>
      <p className="mt-4 text-[13.5px] leading-[1.55] text-white/55 flex-1">{plan.blurb}</p>
      <ul className="mt-5 space-y-1.5 text-[12.5px] text-white/70">
        {plan.deliverables.slice(0,3).map(d => (
          <li key={d} className="flex items-start gap-2">
            <Icon name="check" size={11} strokeWidth={2.4} className="text-accent mt-1" />
            <span>{d}</span>
          </li>
        ))}
      </ul>
      <div className="mt-6 inline-flex items-center gap-1.5 text-[13px] text-white/85 group-hover:text-accent transition">
        View plan
        <Icon name="arrow-right" size={13} strokeWidth={2} />
      </div>
    </a>
  );
};

const Plans = () => {
  return (
    <section id="plans" className="relative py-24 lg:py-32 border-t border-white/8">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
        <SectionHead
          kicker="PLANS · 12"
          title={<>Professional services for <span className="font-serif italic font-normal">every</span> business need.</>}
          intro="Transparent pricing, clear deliverables, and senior writers ready to plug in. No setup fees, no AI templates, no surprises on the invoice."
        />

        {window.PLAN_CATEGORIES.map((cat, ci) => (
          <div key={cat.id} id={`${cat.id}-services`} className="mt-20 scroll-mt-24">
            <div className="flex items-end justify-between gap-6 flex-wrap pb-6 border-b border-white/8">
              <div>
                <div className="font-mono text-[10.5px] tracking-[0.2em] text-white/40 reveal">/ 0{ci+1} · {cat.plans.length} SERVICES</div>
                <h3 className="mt-3 display text-[36px] sm:text-[44px] reveal reveal-delay-1">{cat.label}</h3>
                <p className="mt-2 max-w-[520px] text-[14.5px] text-white/55 reveal reveal-delay-2">{cat.intro}</p>
              </div>
              <span className="font-mono text-[11px] text-white/40 reveal">From ${Math.min(...cat.plans.map(p => window.PLANS[p].price))}</span>
            </div>

            <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
              {cat.plans.map((id, i) => <PlanCard key={id} plan={window.PLANS[id]} idx={i} />)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

window.Plans = Plans;