Pricing Tier Cards

'use client';

import './PricingTierCards.css';

/**
 * PricingTierCards — Full-page 3-tier pricing cards section with animated highlights and feature breakdowns.
 * 
 * @param {string} badge - Eyebrow badge text.
 * @param {string} title - Main headline.
 * @param {string} subtitle - Description text.
 */
export interface PricingTierCardsProps {
  badge?: string;
  title?: string;
  subtitle?: string;
  className?: string;
}

export function PricingTierCards({
  badge = "Plans & Pricing",
  title = "Simple, Predictable Pricing for Everyone",
  subtitle = "Start for free and upgrade as your Astro traffic scales. No surprise overage charges.",
  className = ""
}: PricingTierCardsProps) {
  return (
    <>
      <div className="cq-pricing-tier-cards-cq" data-rk-9c5b50="">
      <section className={`tier-pricing-section ${className}`} aria-labelledby="tier-pricing-title" data-rk-9c5b50="">
        <div className="container" data-rk-9c5b50="">
          <div className="section-header" data-rk-9c5b50="">
            {badge && <span className="section-badge" data-rk-9c5b50="">{badge}</span>}
            <h2 id="tier-pricing-title" className="section-title" data-rk-9c5b50="">{title}</h2>
            <p className="section-subtitle" data-rk-9c5b50="">{subtitle}</p>
          </div>
      
          <div className="tier-grid" data-rk-9c5b50="">
            {/* Free Tier */}
            <div className="tier-card" data-rk-9c5b50="">
              <span className="tier-badge" data-rk-9c5b50="">Community</span>
              <h3 className="tier-name" data-rk-9c5b50="">Hobby</h3>
              <p className="tier-desc" data-rk-9c5b50="">Great for learning React and small hobby sites.</p>
              <div className="tier-price" data-rk-9c5b50="">$0 <span data-rk-9c5b50="">/ forever</span></div>
              <a href="#free" className="tier-btn tier-btn--ghost" data-rk-9c5b50="">Get Started Free</a>
              <ul className="tier-list" data-rk-9c5b50="">
                <li data-rk-9c5b50="">✓ 1 Active Project</li>
                <li data-rk-9c5b50="">✓ Core UI Components</li>
                <li data-rk-9c5b50="">✓ Community Support</li>
                <li data-rk-9c5b50="">✓ MIT Open Source License</li>
              </ul>
            </div>
      
            {/* Pro Tier (Highlight) */}
            <div className="tier-card tier-card--highlight" data-rk-9c5b50="">
              <span className="tier-badge tier-badge--gold" data-rk-9c5b50="">RECOMMENDED</span>
              <h3 className="tier-name" data-rk-9c5b50="">Pro Developer</h3>
              <p className="tier-desc" data-rk-9c5b50="">Perfect for freelancers and modern digital creators.</p>
              <div className="tier-price" data-rk-9c5b50="">$29 <span data-rk-9c5b50="">/ month</span></div>
              <a href="#pro" className="tier-btn tier-btn--primary" data-rk-9c5b50="">Get Pro Access</a>
              <ul className="tier-list" data-rk-9c5b50="">
                <li data-rk-9c5b50="">✓ Unlimited Projects</li>
                <li data-rk-9c5b50="">✓ All 200+ UI & 3D Components</li>
                <li data-rk-9c5b50="">✓ Full Source Code & Figma Kit</li>
                <li data-rk-9c5b50="">✓ Lifetime Updates</li>
                <li data-rk-9c5b50="">✓ Direct Email Support</li>
              </ul>
            </div>
      
            {/* Team Tier */}
            <div className="tier-card" data-rk-9c5b50="">
              <span className="tier-badge" data-rk-9c5b50="">Agencies</span>
              <h3 className="tier-name" data-rk-9c5b50="">Agency Team</h3>
              <p className="tier-desc" data-rk-9c5b50="">For studios and multi-developer organizations.</p>
              <div className="tier-price" data-rk-9c5b50="">$99 <span data-rk-9c5b50="">/ month</span></div>
              <a href="#agency" className="tier-btn tier-btn--ghost" data-rk-9c5b50="">Get Team License</a>
              <ul className="tier-list" data-rk-9c5b50="">
                <li data-rk-9c5b50="">✓ Up to 10 Team Seats</li>
                <li data-rk-9c5b50="">✓ Commercial Client Redistribution</li>
                <li data-rk-9c5b50="">✓ Dedicated Slack Support Channel</li>
                <li data-rk-9c5b50="">✓ Custom Component Requests</li>
                <li data-rk-9c5b50="">✓ 1-on-1 Architecture Reviews</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      </div>
    </>
  );
}

export default PricingTierCards;

/* PricingTierCards — ported from astro-component-kit (sections/PricingTierCards.astro) */

.cq-pricing-tier-cards-cq:where([data-rk-9c5b50]) { container-type: inline-size; }
.tier-pricing-section:where([data-rk-9c5b50]) {
  padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
  background: var(--c-bg-primary, #030712);
}

.container:where([data-rk-9c5b50]) {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header:where([data-rk-9c5b50]) {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem;
}

.section-badge:where([data-rk-9c5b50]) {
  display: inline-flex;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.25);
  margin-bottom: var(--sp-4, 1rem);
}

.section-title:where([data-rk-9c5b50]) {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4, 1rem);
}

.section-subtitle:where([data-rk-9c5b50]) {
  font-size: 1.1rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

.tier-grid:where([data-rk-9c5b50]) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.tier-card:where([data-rk-9c5b50]) {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.tier-card:hover:where([data-rk-9c5b50]) {
  transform: translateY(-4px);
  border-color: rgb(var(--ink-rgb, 255 255 255) / 0.2);
}

.tier-card--highlight:where([data-rk-9c5b50]) {
  background: rgba(20, 25, 50, 0.8);
  border-color: rgba(234, 179, 8, 0.4);
  box-shadow: 0 0 35px -10px rgba(234, 179, 8, 0.2);
  padding: 3rem 2rem;
}

.tier-badge:where([data-rk-9c5b50]) {
  align-self: flex-start;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.tier-badge--gold:where([data-rk-9c5b50]) {
  background: rgba(234, 179, 8, 0.2);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.tier-name:where([data-rk-9c5b50]) {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.3rem;
}

.tier-desc:where([data-rk-9c5b50]) {
  font-size: 0.88rem;
  color: #94a3b8;
  margin: 0 0 1.5rem;
  min-height: 42px;
}

.tier-price:where([data-rk-9c5b50]) {
  font-size: 2.8rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 1.75rem;
  line-height: 1;
}

.tier-price:where([data-rk-9c5b50]) span:where([data-rk-9c5b50]) {
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 500;
}

.tier-btn:where([data-rk-9c5b50]) {
  display: block;
  text-align: center;
  padding: 0.85rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  margin-bottom: 2rem;
}

.tier-btn--primary:where([data-rk-9c5b50]) {
  background: linear-gradient(135deg, #eab308, #d97706);
  color: #000;
  box-shadow: 0 4px 15px rgba(234, 179, 8, 0.3);
}

.tier-btn--primary:hover:where([data-rk-9c5b50]) {
  filter: brightness(1.1);
}

.tier-btn--ghost:where([data-rk-9c5b50]) {
  background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
  color: #fff;
}

.tier-btn--ghost:hover:where([data-rk-9c5b50]) {
  background: rgb(var(--ink-rgb, 255 255 255) / 0.12);
}

.tier-list:where([data-rk-9c5b50]) {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.tier-list:where([data-rk-9c5b50]) li:where([data-rk-9c5b50]) {
  font-size: 0.88rem;
  color: #cbd5e1;
}

@container (max-width: 960px) {
  .tier-grid:where([data-rk-9c5b50]) {
    grid-template-columns: 1fr;
  }
}