export function PricingTable() {
  return (
    <div className="flex flex-col sm:flex-row gap-4 w-full max-w-2xl">
      {/* Tier 1 */}
      <div className="flex-1 rounded-2xl border border-border bg-[#0a0a0a] p-6 flex flex-col">
        <h3 className="text-lg font-medium mb-2">Hobby</h3>
        <div className="text-3xl font-bold mb-6">$0<span className="text-sm text-muted-foreground font-normal">/mo</span></div>
        <ul className="space-y-3 mb-8 flex-1">
          <li className="text-sm text-muted-foreground flex items-center before:content-['✓'] before:mr-2 before:text-foreground">Up to 3 projects</li>
          <li className="text-sm text-muted-foreground flex items-center before:content-['✓'] before:mr-2 before:text-foreground">Basic analytics</li>
        </ul>
        <button className="w-full rounded-md border border-border bg-transparent py-2 text-sm font-medium hover:bg-muted transition-colors">Get Started</button>
      </div>
      
      {/* Tier 2 */}
      <div className="flex-1 rounded-2xl border border-foreground bg-[#111111] p-6 flex flex-col relative overflow-hidden shadow-2xl">
        <div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-zinc-600 to-zinc-300" />
        <h3 className="text-lg font-medium mb-2 text-foreground">Pro</h3>
        <div className="text-3xl font-bold mb-6">$29<span className="text-sm text-muted-foreground font-normal">/mo</span></div>
        <ul className="space-y-3 mb-8 flex-1">
          <li className="text-sm text-foreground flex items-center before:content-['✓'] before:mr-2 before:text-foreground">Unlimited projects</li>
          <li className="text-sm text-foreground flex items-center before:content-['✓'] before:mr-2 before:text-foreground">Advanced analytics</li>
          <li className="text-sm text-foreground flex items-center before:content-['✓'] before:mr-2 before:text-foreground">Priority support</li>
        </ul>
        <button className="w-full rounded-md bg-foreground text-background py-2 text-sm font-medium hover:bg-[#e0e0e0] transition-colors">Upgrade to Pro</button>
      </div>
    </div>
  );
}