// PRICING
function Pricing() {
  const tiers = [
    {
      key: "silver",
      name: "Silver",
      tagline: "Get in the room",
      price: 2499,
      seat2Price: 2249,
      original: 4999,
      off: "50% OFF",
      seats: "32 seats left",
      bookingLink: "https://pages.razorpay.com/rise-to-ipo-with-ai-ps-silver",
      bookingLink2: "https://pages.razorpay.com/rise-to-ipo-with-ai-ps-2silver",
      icon: <Icon.Medal size={18} />,
      includes: [
        "Seating behind Gold rows",
        "Lunch &amp; tea/coffee",
        "Offline-only event access",
        "Networking with 500+ founders",
        "Workbook &amp; templates",
        "₹10,000 online course (free)",
      ],
    },
    {
      key: "gold",
      name: "Gold",
      tagline: "Most founders pick this",
      price: 4999,
      seat2Price: 4499,
      original: 12499,
      off: "60% OFF",
      seats: "11 seats left",
      featured: true,
      bookingLink: "https://rzp.io/rzp/rise-to-ipo-with-ai-ps-gold",
      bookingLink2: "https://rzp.io/rzp/rise-to-ipo-with-ai-ps-2gold",
      icon: <Icon.Award size={18} />,
      includes: [
        "Seating behind VIP, ahead of Silver",
        "Lunch &amp; tea/coffee",
        "Offline-only event access",
        "Premium networking lounge",
        "Workbook + scaling templates",
        "₹20,000 online course (free)",
      ],
    },
    {
      key: "platinum",
      name: "Platinum",
      tagline: "Closest to the speaker",
      price: 11999,
      seat2Price: 10799,
      original: 31999,
      off: "62% OFF",
      seats: "4 seats left",
      bookingLink: "https://pages.razorpay.com/riseto-ipo-with-ai-ps-platinum",
      bookingLink2: "https://rzp.io/rzp/risetoipo-with-ai-ps-2platinum",
      icon: <Icon.Crown size={18} />,
      includes: [
        "Front-row VIP seating",
        "Lunch <b>with</b> the speaker",
        "VIP-only networking circle",
        "Workbook + Basesh&rsquo;s personal annual calendar",
        "₹40,000 online course (free)",
        "15&ndash;20 min 1-on-1 with Basesh",
      ],
    },
  ];

  return (
    <section id="tickets" className="relative py-20 lg:py-28">
      <div className="mx-auto max-w-[1320px] px-5 lg:px-10">
        <div className="text-center max-w-[820px] mx-auto reveal">
          <SectionEyebrow>Tickets &amp; pricing</SectionEyebrow>
          <h2 className="mt-5 text-[40px] lg:text-[56px] leading-[1.05] font-semibold tracking-tight">
            Join us at the <span className="grad-text">Business Summit</span> &mdash; get your tickets today.
          </h2>
          <p className="mt-5 text-mute">
            Three rooms. One day. Pricing closes when seats run out &mdash; this isn&rsquo;t a marketing trick, the venue caps us.
          </p>
        </div>

        <div className="mt-14 grid lg:grid-cols-3 gap-5 lg:gap-6 items-stretch reveal">
          {tiers.map((t) => <TierCard key={t.key} t={t} />)}
        </div>

        <div className="mt-8 text-center text-[13px] text-mute flex items-center justify-center gap-3 flex-wrap">
          <span className="inline-flex items-center gap-1.5"><Icon.ShieldCheck size={14} className="text-teal" /> 100% money-back if you don&rsquo;t leave with a 90-day plan.</span>
          <span className="opacity-30">·</span>
          <span>GST included &middot; UPI &middot; Cards &middot; EMI</span>
        </div>
      </div>
    </section>
  );
}

function TierCard({ t }) {
  const featured = t.featured;
  return (
    <div className={
      "relative rounded-3xl p-7 lg:p-8 flex flex-col " +
      (featured
        ? "glass-strong ring-teal lg:-mt-6 lg:pb-10 bg-gradient-to-b from-teal/[0.08] to-transparent"
        : "glass")
    }>
      {featured && (
        <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-white text-[11px] font-bold tracking-wider uppercase floaty"
          style={{ background: "linear-gradient(95deg,#FF2D87,#8C5AFF)", boxShadow: "0 10px 30px -8px rgba(255,45,135,0.7)" }}>
          ★ Most popular
        </div>
      )}
      {/* head */}
      <div className="flex items-center justify-between">
        <div className="inline-flex items-center gap-2">
          <div className={"w-9 h-9 rounded-xl grid place-items-center " + (featured ? "bg-teal/20 text-teal" : "bg-white/5 text-mute")}>
            {t.icon}
          </div>
          <div>
            <div className="text-[18px] font-semibold leading-none">{t.name}</div>
            <div className="text-[12px] text-mute mt-1">{t.tagline}</div>
          </div>
        </div>
        <div className="text-[10px] font-bold tracking-wider uppercase px-2.5 py-1 rounded-md bg-amber/15 text-amber">
          {t.off}
        </div>
      </div>

      {/* price */}
      <div className="mt-7 flex items-end gap-3">
        <div className="text-[44px] lg:text-[52px] font-semibold tracking-tight leading-none num-tabular">
          ₹{t.price.toLocaleString("en-IN")}
        </div>
        <div className="text-[14px] text-mute line-through pb-2 num-tabular">₹{t.original.toLocaleString("en-IN")}</div>
      </div>
      <div className="mt-2 inline-flex items-center gap-1.5 text-[12px] text-amber font-medium">
        <span className="w-1.5 h-1.5 rounded-full bg-amber animate-pulse" /> Only {t.seats}
      </div>

      <div className="divider-line my-6" />

      {/* includes */}
      <ul className="space-y-3 flex-1">
        {t.includes.map((inc, i) => (
          <li key={i} className="flex items-start gap-3">
            <span className={"mt-0.5 w-5 h-5 rounded-md grid place-items-center shrink-0 " + (featured ? "bg-teal/20 text-teal" : "bg-white/5 text-mute")}>
              <Icon.Check size={12} strokeWidth={3} />
            </span>
            <span className="text-[14px] leading-relaxed text-white/90"
              dangerouslySetInnerHTML={{ __html: inc }} />
          </li>
        ))}
      </ul>

      {/* CTA */}
      <div className="mt-8 space-y-3">
        {/* Original button design */}
        {featured ? (
          <CTA className="w-full justify-center" href={t.bookingLink}>Reserve {t.name}</CTA>
        ) : (
          <a href={t.bookingLink}
            className="btn-ghost w-full inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3.5 font-medium">
            Reserve {t.name} <Icon.ArrowRight size={16} />
          </a>
        )}

        {/* 2-seat hyperlink */}
        <a
          href={t.bookingLink2}
          className="flex items-center justify-start gap-2 group"
          style={{ textDecoration: "none" }}
        >
          <span
            className="shrink-0 w-7 h-7 rounded-md grid place-items-center transition-colors duration-200"
            style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.10)" }}
          >
            <Icon.ExternalLink size={13} className="text-teal group-hover:text-teal-soft transition-colors" />
          </span>
          <span
            className="text-[13px] font-medium leading-snug border-b border-dashed transition-colors duration-200"
            style={{ color: "#00FFC8", borderColor: "rgba(0,255,200,0.35)" }}
          >
            Reserve 2 seats @{t.seat2Price.toLocaleString("en-IN")}/- Per Seat + GST
          </span>
        </a>
      </div>
    </div>
  );
}

window.Pricing = Pricing;