iframe_react_polar.tsx

'use client'

import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { ArrowUpRight, CheckCircle2, X } from 'lucide-react'
import { useEffect, useMemo, useState } from 'react'

type PlanKey = 'monthly' | 'yearly'

const PLAN_CONFIG: Record<
  PlanKey,
  {
    label: string
    price: string
    original: string
    discount: string
    period: string
    perks: string[]
    checkoutUrl: string
  }
> = {
  monthly: {
    label: 'Monthly',
    price: '$99',
    original: '$297',
    discount: '33% off',
    period: '/month',
    checkoutUrl: 'https://buy.polar.sh/polar_cl_PMW2Z9nRFPqOdq0XbtnKFx0kqv6SeToGJPtuG3OiDqr',
    perks: [
      'Large logo placement on homepage and all job pages',
      'Exposure to thousands of visitors',
      'Do-follow link to your website',
      'Shoutout on 𝕏 by @rishi_raj_jain_ to 1.5K+ devs',
      'Shoutout on LinkedIn by Rishi to 4K+ professionals',
    ],
  },
  yearly: {
    label: 'Yearly',
    price: '$80',
    original: '$297',
    discount: '46% off',
    period: '/month',
    checkoutUrl: 'https://buy.polar.sh/polar_cl_E15L1v471bRU0CPsuMT4TIlemKRN0jRCDmjYb1qCZr1',
    perks: [
      'Large logo placement on homepage and all job pages',
      'Exposure to thousands of visitors',
      'Do-follow link to your website',
      'Shoutout on 𝕏 by @rishi_raj_jain_ to 1.5K+ devs',
      'Shoutout on LinkedIn by Rishi to 4K+ professionals',
    ],
  },
}

export function SponsorPlans() {
  const [activePlan, setActivePlan] = useState<PlanKey | null>(null)

  useEffect(() => {
    const handler = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setActivePlan(null)
      }
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [])

  const planOrder = useMemo<PlanKey[]>(() => ['monthly', 'yearly'], [])

  return (
    <div className="mb-16">
      <h2 className="text-foreground mb-8 text-center text-2xl font-bold">Choose your advertisement plan</h2>
      <div className="grid gap-6 md:grid-cols-2">
        {planOrder.map((planKey) => {
          const plan = PLAN_CONFIG[planKey]
          const isBestValue = planKey === 'yearly'

          return (
            <Card key={planKey} className="border-border/60 relative border p-8">
              {isBestValue && <div className="absolute -top-3 right-6 rounded-full bg-blue-600 px-3 py-1 text-xs font-medium text-white">Best value</div>}
              <div className="mb-0">
                <div className="mb-2 flex items-center justify-between">
                  <h3 className="text-foreground text-xl font-bold">Diamond Sponsor</h3>
                  <span className="text-foreground/60 bg-muted rounded-full px-3 py-1 text-xs font-medium">{plan.label}</span>
                </div>
                <p className="text-foreground/70 mb-4 text-sm">Perfect for SaaS tools and developer-focused products looking to reach technical professionals and founders.</p>
                <div className="mb-4 flex items-baseline gap-2">
                  <span className="text-foreground/50 text-sm line-through">{plan.original}</span>
                  <span className="text-foreground text-3xl font-bold">{plan.price}</span>
                  <span className="text-foreground/60 text-sm">{plan.period}</span>
                </div>
                <div className="mb-6 inline-block rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700 dark:bg-green-900/20 dark:text-green-400">
                  {plan.discount}
                </div>
              </div>
              <ul className="mb-6 space-y-3">
                {plan.perks.map((perk) => (
                  <li key={perk} className="flex items-start gap-2">
                    <CheckCircle2 className="text-foreground/70 mt-0.5 h-5 w-5 shrink-0" />
                    <span className="text-foreground/80 text-sm">{perk}</span>
                  </li>
                ))}
              </ul>
              <Button size="lg" className="w-full" onClick={() => setActivePlan(planKey)}>
                {plan.label === 'Monthly' ? 'Become Monthly Diamond Sponsor' : 'Become Yearly Diamond Sponsor'}
                <ArrowUpRight className="h-4 w-4" />
              </Button>
              <p className="text-foreground/50 text-center text-xs">
                We'll contact you shortly to request your product details.{` `}
                <a href={plan.checkoutUrl} target="_blank" rel="noreferrer" className="text-primary underline">
                  Open in new tab ↗
                </a>
              </p>
            </Card>
          )
        })}
      </div>

      {/* Preloaded iframe modal */}
      <div
        className={`fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 transition-opacity duration-200 ${
          activePlan ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'
        }`}
        aria-hidden={!activePlan}
      >
        <div className="bg-background relative h-[80vh] w-[80vw] max-w-5xl overflow-hidden rounded-2xl shadow-2xl">
          <button
            type="button"
            onClick={() => setActivePlan(null)}
            className="text-foreground/70 hover:text-foreground absolute top-4 right-4 rounded-full border px-2 py-1 text-sm font-medium transition-colors"
            aria-label="Close checkout overlay"
          >
            <X className="h-4 w-4" />
          </button>
          {planOrder.map((planKey) => (
            <iframe
              key={planKey}
              src={PLAN_CONFIG[planKey].checkoutUrl}
              title={`${PLAN_CONFIG[planKey].label} Diamond Sponsor checkout`}
              loading="eager"
              className={`h-full w-full border-0 ${activePlan === planKey ? 'block' : 'hidden'}`}
              allow="payment *; clipboard-write"
            />
          ))}
        </div>
      </div>
    </div>
  )
}